流失布局案例: 京东商城: 点击查看
标准的 viewport 设置:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
属性 | 解释说明 |
---|---|
width | 宽度设置的是viewport宽度,可以设置device-width特殊值 |
initial-scale | 初始缩放比,大于0的数字 |
maximum-scale | 最大缩放比,大于0的数字 |
minimum-scale | 最小缩放比,大于0的数字 |
user-scalable | 用户是否可以缩放,yes或no (1或0) |
视口是浏览器显示页面内容的屏幕区域, 视口可以分为布局视口、视觉视口和理想视口
它是用户正在看到的网站的区域,可通过缩放去操作视觉视口
一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比,1CSS像素=1物理像素
background-size: 50px 50px; /*原始图片100*100px*/
关于更多: background-size 属性
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
本节单词:
max
min
viewport
initial-scale
maximum-scale
minimum-scale
user-scalable
layout-viewport
visual-viewport
ideal-viewport
webkit
-webkit-tap-highlight-color: transparent
-webkit-appearance:
-webkit-touch-callout