## **移动端适配：** * rem:现在多数企业用的方案 * vw/vh:未来的适配方案 ## **主要的尺寸单位** **css像素：px** * 屏幕(显示器)实际上是由一个一个的小点点构成的 * 不同屏幕的像索大小是不同的,像素越小的屏幕显示的效果越清晰 * 所以同样的200px在不同的设备下显示效果不一样 **百分比：%** * 可以将属性值设置为相对于其义元素属性的百分比 * 设置百分比可以使子元素跟随父元素的改变而改变 **em** * em是相对于**父元素**的字体大小来计算的 * 1em= 1 个font-size 将元素的font-size设置为100px;则1em=100px  **rem** * em是相对于**根元素**（html）的字体大小来计算的 * 1em= 1个html的font-size（浏览器默认16px） 将html的font-size设置为100px;则1rem=100px >[danger]为啥不把根元素的font-size设置为1px，其他设置16rem？因浏览器默认16px且支持的最小font-sieze为12px **像素解惑：** 屏幕是由一个一个发光的小点构成,这一个个的小点就是像素 分辦率, 1920 x 1080说的就是屏幕中小点的数量 在前端开发中像素要分成两种情况讨论, css像素和物理像素 物理像素,上述所说的小点点就属于构理像素 css像素,编写网页时,我们所用像素都是css像素 浏览器在显示网页时,需要将css像素转换为物理像素然后再呈现 一个css像素最终由几个物理像素显示,由浏览器决定: 默认情况下在pc端,一个css像素 =一个物理像素 视口(viewpont) 视口就是屏幕中用来显示网页的区域 可以通过查看视口的大小,来观察css像素和物理像素的比值 默认情况下（浏览器放大100%全屏）: 视口宽度1926px (css像素) 1920px (物理像素) 此时,css像索和物理像素的比是1:1 浏览器放大两倍的情况: 视口宽度960px (css像索) 1920px (物理保素) -此时, css像素和物理像素的比是1：2（向100px×100px的图片截图后是200px×200px） [查看手机像素的网站](https://material.io/resources/devices) 移动端 在不同的屏幕,单位像素的大小是不同的,像素越小屏幕会越清晰 pc 24寸 1920x1080 iphone6 4.7寸 750 x1334 智能手机的像索点远远小于计算机的像索点 问题,一个宽度为900px的网页在iphone6中要如何显示呢? 设置div元素width:900px，iphone6手机访问此div没有填满屏幕。  原因： 默认情况下,移动端的网页都会将视口设置为980像素(css像素)以确保pc端网页可以在移动端正常访问,但是如果网页的宽度超过980,移动端的浏览器会自动对网页进行缩放以完整显示网页，但是体验不好，大部分网站单独为移动端设计网页