一、meta viewport（视口）
移动端初始视口的大小为什么默认是980px？
因为世界上绝大多数PC网页的版心宽度为 980px ，如果网页没有专门做移动端适配，此时用手机访问网页旁边刚好没有留白，不过页面缩放后文字会变得非常小。
为了解决页面缩放的体验问题，在网页代码的头部，加入一行viewport元标签。
<meta name="viewport" content="width=device-width, initial-scale=1">这里的device-width告诉浏览器，将视口的宽度设置为设备宽度（这个宽度是人为预设的，不设的话就是980px）。
属性含义
initial-scale：第一次进入页面的初始比例
minimum-scale：允许缩小最小比例
maximum-scale：允许放大最大比例
user-scalable：允许使用者缩放，1 or 0 (yes or no)
二、图片适配
img { max-width: 100%; }
此时图片会自动缩放，同时图片最大显示为其自身的100%（即最大只可以显示为自身那么大）
为什么不用 img { width: 100%; } ？
当容器大于图片宽度时，图片会无情的拉伸变形
三、媒体查询
为什么要媒体查询？
针对不用的设备提前为网页设定各种 CSS 样式CSS3中的Media Query模块，自动检测屏幕宽度，然后加载相应的CSS文件
语法举例
@media screen and (min-width:1200px){
body{
background-color: red;
}
当屏幕宽度大于1200px时，背景色变为红色
四、动态 rem 方案
为什么要用rem？
和媒体查询配合，实现响应式布局
px、em、rem 有什么不同？
px是pixel（像素），是屏幕上显示数据的最基本的点，在HTML中，默认的单位就是px；em 是一个相对大小，相对于父元素font-size的百分比大小rem 是相对于根元素<html>的font-size
用法示例
1、首先在HTML中设置一个基准值，如font-size: 100px;
2、将像素值除以100（设定的基准值）计算出对应的rem的值
如果一个div的宽度为600300px ,改为rem即为6rem3rem
3、根据当前屏幕的宽度和设计稿的宽度来计算此时的HTML的font-size的值
当前手机屏幕宽度为375px，设计稿宽度为640px，375/640*100->fontsize=58.59375
网友评论