移动web——基本知识点总结

视口viewport

一、在桌面端的浏览器的宽度有肯能是很大的，若是设置了一个很大的值，那么在移动端中的浏览器显示的时候会有横向移动的拖拽条，为了不出现这样的横向拖拽条，咱们每次都要页面的宽度就是移动设备浏览器的宽度

二、移动设备的浏览器（或App中的webview）比如是相框，viewport就是相框中的画，若是画与相框同样大是否是很完美？

三、快捷键：meta：vp + tab，使用了meta能够将视口调整到与设备大小同样

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

三、参数解释

name：声明属性是viewport属性
content：属性具体设置的值
width：宽度，通常是设备宽度device-width
height：高度，通常不设置让其自动撑大
initial-scale：视口默认的缩放比例 通常默认设置的是1.0
user-scalable：设置是否支持缩放 通常设置的是 no、false、0
maximum-scale：最大的所放值  1.0 
minimum-scale：最小的所放值 1.0

移动端样式

一、点击高亮效果：移动端默认点击会附带高亮效果，能够将此效果变成透明

a, button, input, optgroup, select, textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

二、盒子模式：box-sizing设置以边框为主，这样可以保证盒子大小不会由于内容的变化而改变其布局

box-sizing: content-box;

三、input样式：移动端input标签会附带有3d效果，简单的border与outline设置为none没法去除

input {
    border: none;
    outline: none;
    -webkit-appearance: none;
}

四、最小最大宽度：考虑到移动设备在大尺寸的的屏幕不会过分缩放 失去清晰度,在小尺寸的屏幕中不会出现布局错乱的问题，值不是固定的，根据实际状况调整

max-width: 640px;  /*在行业当中的移动端的设计图通常使用的是640px*/
min-width: 300px;  /*在移动设备当中如今最小的尺寸320px*/

五、结构伪类选择器：E是子元素，意思是相对E这个子元素的父元素下的第几个同类元素

E:first-of-type匹配同类型中的第一个元素E
E:last-of-type匹配同类型中的最后一个元素E
E:nth-of-type(n) 匹配同类型中的第n个元素E