移动端调试方法css
视口(viewport)就是浏览器显示页面内容的屏幕区域。视口能够分为布局视口、视觉视口和理想视口html
布局视口layout viewportweb
视觉视口 visual viewport移动web开发
理想视口ideal viewport浏览器
meta视口标签服务器
<meta name="viewport" content="width=device-width,user-scalable=no,initail-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
属性 | 解释说明 |
---|---|
width | 宽度设置的是viewport宽度,能够设置device-width特殊值 |
initial-scale | 初始缩放比,大于0的数字 |
maximum-scale | 最大缩放比,大于0的数字 |
minimum-scale | 最小缩放比 |
user-scalable | 用户是否能够缩放,yes或者no(1或0) |
标准的viewport设置app
二倍图ide
物理像素点指的是屏幕显示的最小颗粒,是物理真实存在。这是厂商在出厂时就设置好了,好比苹果6\7\8是750*1334模块化
咱们开发时候的1px不是必定等于1个物理像素的布局
PC端页面,1个px等于1个物理像素的,可是移动端就不尽相同
一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比
背景缩放 background-size
background-size 属性规定背景图像的尺寸
background-size:背景图片宽度 背景图片高度;
属性 | 说明 |
---|---|
单位 | 长度|百分比|cover|contain |
cover | 把背景图片扩展至足够大,以使背景图片彻底覆盖北京区域 |
contain | 把背景图像扩展至最大尺寸,以使齐宽度和高度彻底适应内容区域 |
物理像素&物理像素比
多倍图
移动端主流方案
移动端技术解决方案
移动端浏览器
CSS初始化normalize.css
特殊样式
/**CSS3盒子模型/ box-sizing:border-box; -webkit-box-sizing:border-box; /*点击高亮咱们须要清除 */ -webkit-appearance:none; /*禁用长安页面时的弹出菜单*/ ima,a{ -webkit-touch-callout:none; }
移动端技术选型