视口viewport
1、在桌面端的浏览器的宽度有肯能是很大的,如果设置了一个很大的值,那么在移动端中的浏览器显示的时候会有横向移动的拖拽条,为了避免出现这样的横向拖拽条,我们每次都要页面的宽度就是移动设备浏览器的宽度
2、移动设备的浏览器(或App中的webview)好比是相框,viewport就是相框中的画,如果画与相框一样大是不是很完美?
3、快捷键:meta:vp + tab,使用了meta可以将视口调整到与设备大小一样
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
3、参数解释
name:声明属性是viewport属性 content:属性具体设置的值 width:宽度,一般是设备宽度device-width height:高度,一般不设置让其自动撑大 initial-scale:视口默认的缩放比例 一般默认设置的是1.0 user-scalable:设置是否支持缩放 一般设置的是 no、false、0 maximum-scale:最大的所放值 1.0 minimum-scale:最小的所放值 1.0
移动端样式
1、点击高亮效果:移动端默认点击会附带高亮效果,可以将此效果变成透明
a, button, input, optgroup, select, textarea { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
2、盒子模式:box-sizing设置以边框为主,这样能够保证盒子大小不会因为内容的变化而改变其布局
box-sizing: content-box;
3、input样式:移动端input标签会附带有3d效果,简单的border与outline设置为none无法去除
input { border: none; outline: none; -webkit-appearance: none; }
4、最小最大宽度:考虑到移动设备在大尺寸的的屏幕不会过度缩放 失去清晰度,在小尺寸的屏幕中不会出现布局错乱的问题,值不是固定的,根据实际情况调整
max-width: 640px; /*在行业当中的移动端的设计图一般使用的是640px*/ min-width: 300px; /*在移动设备当中现在最小的尺寸320px*/
5、结构伪类选择器:E是子元素,意思是相对E这个子元素的父元素下的第几个同类元素
E:first-of-type匹配同类型中的第一个元素E E:last-of-type匹配同类型中的最后一个元素E E:nth-of-type(n) 匹配同类型中的第n个元素E
来源:https://www.cnblogs.com/wuqiuxue/p/8228878.html