布局的方案

解决web移动页面布局，我主要分为这几种方法：百分比，媒体查询，flex布局，缩放比例（rem），VW布局

提示

在写布局方法前，先写写h5的meta标签的name="viewport"属性，viewport可以理解页面放在一个虚拟的“窗口”（viewport--视图窗口）中，我自己的理解像一个投影仪，投在光板上，光板就好像是屏幕。

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

width：控制 viewport 的大小，可视区域的宽度（一般会设置成手机屏幕的宽带device-width）可以指定的一个值，如果600，
或者特殊的值，也就是下面说的设置layout viewport 的宽度，如 device-width为设备的宽度（单位为缩放为100%时的CSS的像素），
指的是viewport的宽度，当大于手机页面宽度是，设置的div种的字会超出本屏幕，不会自动换行
height：和 width 相对应，指定高度
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例（会对屏幕进行缩放，测试的时
候注意maximum-scale和minimum-scale）
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

还有layout viewport（布局视口），visual viewport（视觉视口）和ideal viewport（理想中的视口）

layout viewport是指浏览器的默认viewport，（大于浏览器可视区域的宽度的）可以通过
document.documentElement.clientWith来获取（移动端浏览器的viewport默认是layout viewport为980px（大多数））
visual viewport代表浏览器可视区域的大小，是屏幕支持的分辨率大小，由硬件决定，通过window.innerWidth来获取。
(这里不得不提一下，退出Retina高清物理屏幕之后，物理像素4个点等于独立像素（css像素）的1个点，这样也就有了
1px像素的解决)
ideal viewport是指移动设备的理想viewport，不同的设备拥有不同的ideal viewport，我们可以通过设置
<meta name="viewport"/>来修改，iPhone<=5s：device-width=320px，iPhone=8：device-width=375px，
iPhone=8p：device-width=414px，当 initial-scale = 1 时，移动设备默认的ideal viewport是layout viewport。
idealviewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为idealviewport
的宽度（单位用px），那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。idealviewport的
意义在于，无论在何种分辨率的屏幕下，那些针对idealviewport而设计的网站，不需要用户手动缩放，
也不需要出现横向滚动条，都可以完美的呈现给用户。

1.百分比（流体布局）

一般是相对父元素的宽高进行计算，随着屏幕的变大或变小，简单实用，但不是按等比放大，
会有一些变形，使用时需要注意(有时后端返回的图片不一样大，高度不一致，会变形，图片建议不要用百分比)

2.媒体查询(响应式)

@media screen and (min-width: 320px) {
html {font-size: 3.2px
}
}@media screen and (min-width: 481px) and (max-width:640px) {
    html {font-size: 4.8px}
}
@media screen and (min-width: 641px) {
    html {font-size: 6.4px}
}
在不同的屏幕下，可以给里面的元素设置不同的值，确定就是代码繁琐，写起来比较多

3.flex布局（弹性盒模型）

这个方法也就是display：flex，这个推荐阮一峰老师写的日志
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

4.缩放比例（rem）

讲这个之前，先说说px，em和rem的区别，其实px也是一个相对元素，应该可以说是css中最小的相对元素了，
em是相对父元素的字体大小来说的，rem（font size of the root element）是相对于html的字体来计算的。
例如：html标签font-size:10px,那么1rem=10px。在工作中，一般用js控制html的字体（不过js和css有一定的耦合性）
//注意document整个文档，包含规范声明<!DOCTYPE html>之类，document.documentElement打印的是html标签及以内的标签
var docEl = document.documentElement;
    var recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth >= 750) {
            clientWidth = 750;
        }
        docEl.style.fontSize = 20 * clientWidth / 375 + 'px';
    };
    recalc();
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//监听方向改变和调整窗口大小
        window.addEventListener(resizeEvt, recalc, false);

5.VW布局

vw : 1vw 等于视窗宽度的1%
vh : 1vh 等于视窗高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个
用sass写的比较多，假如用750的设计稿：
/* 移动端页面设计稿宽度 */
$design-width: 750;
/* 单位px转化为vw */
@function px2vw($px) {
    @return ($px / $design-width) * 100vw;
}

/* 单位vw转化为px，可用于根据vw单位快速计算原px */
@function vw2px($vw) {
    @return #{($vw / 100) * $design-width}px;
}
/*
vw与px对应关系，100vw为视窗宽度，$vw即为$px对应占多宽

    $px                    $vw
-------------    ===    ------------
$design-width              100vw
*/
我看好多人用vm和rem组合用，确实不错，缺陷就是有些低版本的浏览器不支持，但我想以后应该会好

补充

补充点知识
    设备像素(device pixel)不同的机子上，他的像素长度大小不一样，这也就是为什么相同尺寸的苹果和华为，他们包
    含的像素不一样多(出厂时就设置好了)，然而**设备分辨率**的单位就是设备像素(px)
    CSS像素是没有实际大小的抽象单位，它是一个相对长度，它相对的是电脑或手机显示器的分辨率。又叫设备独立像素，
    逻辑像素。css像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素的长度是
    不同的，尤其是在移动端，即使在同一个机子上每1个CSS像素所代表的物理像素也是可以变化的，缩放会引起CSS像素
    的变化，即引起每1个CSS像素所代表的物理像素变化，例如，当用户把页面放大一倍，那么css中1px所代表的物理像素
    也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
    对于低分辨率设备（绝大部分显示器，手机屏幕），1个css像素相当于最接近参考像素的整数个设备像素，原因可能是一个像素点只能放一个像素吧
    对于高分辨率设备(打印机)来说，1个css像素就是96分之一英寸。
    ** 页面缩放比例 = 物理像素/CSS像素 **//可以用这个window.devicePixelRatio 获取，这也就是说的Retina值会大
    详细可参考
    https://blog.csdn.net/aiolos1111/article/details/51967744
    https://juejin.cn/post/6844903673621905416#heading-0

web移动页面布局的几种方式详解