·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(简单,推荐)
混合布局