移动WEB适配布局

移动端开发要求内容文字随屏幕的变化而改变，而一般的流式布局和flex布局主要针对的是宽度变化，怎样让屏幕发生变化时元素内容的宽高等比例缩放。

目前使用较多的是rem,它是一个相对单位，是相对于htnl元素的字体大小。它的优点就是可以通过html的文字大小改变页面中元素大小来整体控制。

整体控制需要用到媒体查询技术media,可以根据不同的尺寸改变不同的样式。

其中，最常用的是width,max-width,min-width.

   /* 从大往小写，下面的样式会覆盖上面的样式 */

        

        @media screen and (max-width: 800px) {

            body {

                background-color: slateblue;

            }

        }

        

        @media screen and (max-width: 600px) {

            body {

                background-color: springgreen;

            }

        }

        

        @media screen and (max-width:300px) {

            body {

                background-color: tomato;

            }

        }

通常把不同尺寸的样式单独抽离出来，需要的时候才调用

1.通过<link>标签

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"> 

 <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">

 

2.通过@import

        @import url('./style320.css') screen and (min-width: 320px);

        @import url('./style640.css') screen and (min-width: 640px);

使用媒体查询根据不同比例设置HTML元素大小，页面元素使用rem为单位，从而达到等比缩放的适配。