响应式布局旨在提供适应不同设备的舒适界面和良好用户体验，确保网站兼容多种终端。其核心思想是根据设备尺寸应用不同的CSS样式，通过设置viewport元标签实现移动端自适应。例如，通过common.css和mobile.css实现宽度大于500px和小于500px时的样式变化，观察页面布局在浏览器宽度变化时的响应效果。
响应式布局出现背景：比如，篇幅很长的文章在手机端预览时，会出现很长的横向滚动条。
基本定义：为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之，就是一个网站能够兼容多个终端。
根本宗旨：写一次代码，跑在一万种设备上
核心思想：不就是设置宽度么？
实现方式：根据不同设备，设置不同CSS样式，设置该设备支持的页面宽(高)。
viewport
另外，在此之前，我们需要在head里设置一个meta标签，viewport，来设置移动端自适应
ViewPort详细信息，可参考此处：浅谈meta viewport
附上代码
Html：
响应式布局响应式布局
基本定义：为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之，就是一个网站能够兼容多个终端。
根本宗旨：写一次代码，跑在一万种设备上
核心思想：不就是设置宽度么？
实现方式：根据不同设备，引用不同CSS样式，设置支持的宽。
common.css：body{
font-style:italic ;
}
div{
color: Green;
}
p{
padding: 5px;
}
mobile.css：body{
font-style:normal;
color: red;
}
p{
padding: 20px;
}
以上两种css代码只是做测试用：在浏览器中F12后，改变页面宽度，来看看效果。宽度分别大于500px：
小于500px：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
