css 响应式布局 css3媒体查询

响应式布局是什么

Responsive web page 响应式/自适应网页
可以根据浏览设备不同（pc、pad、phone、print…）
而自动改变布局，图片，文字效果，不会影响用户体验

写响应式布局的要求

1. 布局，尽量对元素宽度，不写绝对值
   必须是流式布局（默认文档流+浮动）
2. 文字和图片大小随着容器的大小改变 rem
3. 使用css3提供的媒体查询技术

响应式布局存在问题:
1.代码量和复杂程度，几何性的增加
2.复杂的页面，不适合使用响应式

编写响应式布局

1.手机适配

代码不需要背，你写的页面，如果不需要在移动端展示，下列代码不需要写
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
width=device-width     设置视口宽度为设备宽度
initial-scale=1.0         设置视口宽度能否缩放  1代表1倍，不缩放
maximum-scale=1.0         允许缩放的最大比例
user-scalable=0         是否允许用户手动缩放 0代表不允许
最简方式
<meta name="viewport" content="width=device-width,inital-scale=1">

• 所有内容/文字/图片尽量使用相对尺寸，尽量不使用绝对值
• 使用媒体查询，配合流式布局+弹性布局，完成响应式布局
• 媒体查询技术
  css3 Media Query ， 做响应式的必备技术
  媒体Media:浏览器页面的设备
  设备：screen（pc/pad/phone）、TV、print
  媒体查询的原理：自动根据当前浏览设备的不同（尺寸、方向、解析度不同），有选择器性的，执行一部分css，忽略其他的css

语法：
<style>
@media screen and (min-width:768px) and (max-width:991px){
选择器{样式}
选择器{样式}
}
</style>

开发常用屏幕尺寸

• 超大屏 xl 大于1200px
• 大屏 lg 992px - 1199px
• 中屏 md 768px - 991px
• 小屏 sm 576px - 767px
• 超小屏 xs 小于等于575px

响应式布局，基本上所有元素都要改变盒子模型计算方式
使用box-sizing:border-box