移动端适配方案与css单位介绍_css 手机宽度单位

一、Css常用单位px,rem,em,vw,vh,%

1. px

        px就是pixel像素的缩写，相对长度单位(表示相对大小，不同分辨率下相同的px元素显示会不一样)。像素px是固定像素相对于显示器屏幕分辨率而言，一旦设置了就无法因为适应页面视口大小是分辨率的尺寸单位。

设备物理像素比(devicePixelRatio)，即

是指在理想布局宽度，使用多少个物理像素来渲染一个css像素。浏览器会根据设备像素比, 来展示图像;所以, 在 CSS 中 1px 可不一定对应真实在显示器上的 1px!

        物理像素：是指设备屏幕实际拥有的像素点也叫分辨率（设备独立像素），设备出厂后就不能改变的参数。

         css像素：也叫做逻辑像素，是相对单位                

• 缩放比例就是 css 像素边长 / 设备独立像素边长；
• 在缩放比例为 100% 的情况下，1 个 css 像素大小等于 1 个设备独立像素；
• 在缩放比例为 200% 的情况下，1 个 css 像素大小等于 (2 * 2) 个设备独立像素；

比如：在 CSS 中使用的 px 都是指 css 像素，比如 width: 128px。css 像素的大小是很容易变化的，当我们缩放页面的时候，元素的 css 像素数量不会改变，改变的只是每个 css 像素的大小。也就是说 width: 128px 的元素在缩放200% 以后，宽度依然是 128 个 css 像素，只不过每个 css 像素的宽度和高度变为原来的两倍。如果原本元素宽度为 128 个设备独立像素，那么缩放 200% 以后元素宽度为 256 个设备独立像素。

2.rem 、em

        浏览器默认最小字体12px, (设置一个字体为8px不会起作用，会显示为最小的字体12px，解决办法：transform：scale(0.75)

        默认字体大小16px,意思就是假设我不会html做任何设置,对其他的样式class设置2rem,那么显示出来的样式应该是32px(16px * 2)。使 1rem=10px得方法：设置HTML{font-size：62.5%；}

总结：

• em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
• em是相对于其父元素来设置字体大小，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，需要在根元素确定一个参考值。

3. vw、vh

         vw和vh是相对长度单位，是相对视口屏幕的的宽度和高度。将页面分为100份，1vw = device-width/100，100VW等于屏幕的宽度，vh类似。

假设视觉稿宽度为 750px（100%），视觉稿中某个字体大小为 75px（占10%），则我们的 css 属性写成：font-size: 10vw

再假设我的设计图是375px，某个盒子宽是24px,那么 24/375表示是该盒子占屏幕的宽度比例,这时候你又知道 屏幕总宽度为100vw, 那么动态的宽度为 24/375*100vw。

4. 百分比%

        一般来说就是相对于父元素，如果父元素没有指定高度，设置百分比则没有效果

4.1 对于普通定位元素就是我们理解的父元素

4.2 对于position: absolute;的元素是相对于已定位的父元素

4.3 对于position: fixed;的元素是相对于ViewPort（可视窗口）

二、视口viewport

        用于显示网页部分的区域，在PC端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视口（Layout Viewport）、视觉视口（Visual ViewPort）和理想视口（Ideal ViewPort）

通过meta设置视口大小： 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

三、适配方案 

        1. rem布局

        根据 设备屏幕宽度 设置html标签根元素字体大小font-size（如果设置 html 的 font-size 为 16px，则如果需要设置元素字体大小为 16px，则css写为 1rem），可以成比例的调整以rem为单位的属性，达到自适应的效果（在不同尺寸的屏幕横向填满屏幕，且在不同屏幕元素大小比例一致。）有px转rem插件可用！

        2. 百分比布局

        如果做toc的项目设计很多尺寸设置，百分比计算对开发者来说并不友好，且元素百分比参考的对象是父元素，元素嵌套较深会有问题。

        3. viewport 适配

      拿到设计稿后采用 vw 方案的话，从底层根本上解决了不同尺寸屏幕的适配问题，因为每个屏幕的百分比是固定的、可预测、可控制的。在需要将对应的元素大小单位 px 转换为 vw 单位时可以利用一些类似 postcss-px-to-viewport 的插件，来将 px 自动转换为 vw，从而解决难以计算的问题，并且兼容性高。

• vw：是 viewport's width 的简写，1vw 等于 window.innerWidth 的 1%；
• vh：和 vw 类似，是 viewport's height 的简写，1vh 等于 window.innerHeihgt 的 1%；
• vmin：vmin 的值是当前 vw 和 vh 中较小的值；
• vmax：vmax 的值是当前 vw 和 vh 中较大的值；

        4. 媒体查询

        基于 css 的媒体查询属性 @media 分别为不同屏幕尺寸的移动设备编写不同尺寸的 css 属性，缺点是针对所有的屏幕尺寸做适配（在每一个 @media 中定义一遍不同的尺寸）显然是不合理的。