web移动端

·meta视口标签

        <meta name = "viewport" content = "width = device-width, user-scalable = no, initial-scale = 1.0, maximum-scale = 1.0, minimum0scale = 1.0">（默认的标准）

width                   宽度设置的是viewport的宽度，可以设置device-width特殊值

initial-scale         初始缩放比，大于0的数字

maximum-scale  最大缩放比，大于0的数字

minimum-scale   最小缩放比，大于0的数字

user-scalable      用户是否可以缩放（yes或no， 1或0）

·物理像素和物理像素比

        物理像素点指屏幕显示的最小颗粒

        1px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

·background-size背景图片大小

        cover：完全覆盖盒子，可能显示不全

        contain：可能出现空白

`css3盒子模型

        box-sizing:border-box（padding和border不会撑大盒子）

·特殊样式

        高亮样式清除        -webkit-tap-highlight-color:transparent;

        默认外观清除        -webkit-appearance:none;

        禁止长按页面时弹出菜单        -webkit-touch-callout:none;

移动端常见布局

        流式布局（百分比布局）

                max-width 最大宽度，min-width 最小宽度

        flex弹性布局（推荐）

                父盒子定义为flex布局后，子元素的float、clear、vertical-align属性将失效

                常见父项属性

                ​​​​​​​       

                        flex-direction：

        ​​​​​​​                 

                          justify-content：

                        

                        flex-wrap：

                         

                         align-items：

                        

                         align-content：

                        

                常见子项属性 

                        flex（子项没有设置宽度）

                        

                        align-self：

                         

                        order：

                         

                 线性渐变色：

                

        less+rem+媒体查询布局

                rem是以HTML元素的字体大小为基准

                媒体查询语法

                

                

                 

                 引入资源（当不同尺寸样式改动太大时，使用不同样式表）

                

                 例：

                

                less基础：

                        less变量：语法（@变量名：值）

                        less编译：vscode插件（easy less）

                        less嵌套：

                                1、子元素的样式直接写在父元素样式里

                                2、伪类、交集、伪元素选择器，在内层选择器前面加上&

                         less运算：

                                运算符的左右两边要加空格

                                参与运算的两个数有不同的单位，以第一个为准

                        

 

                 rem适配方案

                          1、less+媒体查询+rem

                          2、flexible.js+rem（简单，推荐）

 

 

 

        混合布局