移动端媒体尺寸_移动端是如何做适配的？

一、meta viewport(视口)

移动端初始视口的大小为什么默认是980px？

因为世界上绝大多数PC网页的版心宽度为 980px ，如果网页没有专门做移动端适配，此时用手机访问网页旁边刚好没有留白，不过页面缩放后文字会变得非常小。

为了解决页面缩放的体验问题，在网页代码的头部，加入一行viewport元标签。

​这里的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 是相对于根元素的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