手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，所谓移动端适配，就是在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”
主要从以下几点入手：
1.百分比布局
目的是让页面能够自适应屏幕宽度而自动调整大小。但是这是有缺陷的，元素随页面大小放生改变的时候，会显得极不协调与难看。你无法基于宽度去设置一个高度，所以高度不会因为屏幕宽度的改变而进行有比例的变化，高度和宽度无法做任何的配合。
2.vm/vh
vw(view-width), vh(view-height) 这两个单位是CSS新增的单位，表示视区宽度/高度，视区总宽度为100vw, 总高度为100vh。视区指浏览器内部的可视区域大小：window.innerWidth/Height
这两个长度单位和百分比相似，我们可以通过这两个长度属性来让页面自适应，但vw属性的兼容性并不好。
3.媒体查询
通过设置媒体查询来更改页面样式，例如：
①，@media max-width800px{css样式} --------------屏幕小于800px的时候显示的css样式
②，<link rel="stylesheet" type="text/css" href="./mobile.css" media="screen and (max-device-width: 500px)"> -------------------只在设备屏幕的宽度不大于500px的时候生效移入的css文件
ps：当载入link标签的时候，路径上的css文件已经下载好了，生效与否只取决于媒体查询是否生效，会动态切换。
详见：媒体查询
采用媒体查询的方法来做移动端的适配也存在着一些问题，因为众所周知，手机的型号和样式太多了，所以我们不能专门为每个型号的手机都单独去做一个样式，这样不现实，而且上文也提到了通过百分比布局来控制页面的伸缩也是存在着问题的，如果想要做出一个比较好的适配方案就离不开下文所述的内容
4.meta标签
meta
手机在浏览网页的时候，手机会模拟出与自身屏幕大小不符的分辨率来显示页面，这样就会使得页面显示出现很多问题，比如我们原本做好了手机端的媒体查询，在屏幕宽度小于450px的时候更改样式，但由于它模拟出的分辨率大于450px，这样就会让我们原本想要做出的样式效果得不到展示，会严重影响用户体验。
上面这个meta标签的作用就是让手机预览页面的时候就是实际屏幕宽度，而且禁止其缩放，各种缩放比例都是1.
5.flex布局
flex布局对于屏幕适配也很有帮助，有些地方通过flex布局的实现方式，效果会比较合理。因为弹性盒子可以根据视口大小做出调整，比如缩放，换行。详见：flex布局
6.动态rem，手机专用的适配方案
可设想一下，如果页面内容能够随着不同的屏幕而进行等比例缩放是不是就能很好的适配呢？在百分比布局中可以缩放但不能等比例，问题就在于高度不能基于宽度来设置，其实这个问题可以解决，下面就开始了解动态rem，手机专用的适配方案。
①，rem是一个长度单位，我们要知道，1rem等于HTML元素的font-size属性值
②，通过JS的全局属性innerWidth来读取页面的可视宽度(一般在手机中就等于屏幕的宽度)
③，我们可以把HTML的font-size属性对应上innerWidth的值，比如这样写：
rem
当然你可以加减乘除innerWidth，毕竟页面宽度很大，如果font-size=350px岂不是很不好操作
④，通过用JS更改HTML元素的font-size属性值，rem的值也会随之变化，屏幕越大，rem越大，屏幕越小，rem越小，接下来我们在给页面内容写长度单位的时候就可以用rem，比如，给一个元素的宽度为1rem，高度为0.5rem，那么这个元素就会随着不同的屏幕而等比例缩放，比例就是2:1
PS:chrome浏览器默认设置能显示的最小字体是12px,也就是说如果给css样式小于12px,那么还会显示12px.这需要手动设置才行.但浏览器用户一般都不会去设置这个.所以让字体不要小于12像素,否则chrome浏览器没法显示。
当我们拿到设计稿写页面的时候，不可能去把所有的px长度计算成rem，这样太过于麻烦且效率低下，所以必须学会SCSS，让SCSS把我们自动把px换算成rem。
SCSS中使用下面的函数即可计算了：
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
比如你写一个div的宽度：
div{
widnth:px(实际像素);
}
以上
网友评论