文章目录
1.移动端基础
移动端调试方法
2.视口
视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口layout viewport、视觉视口visual viewport和理想视口ideal viewport
2.1 meta视口标签
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
3 二倍图
物理像素&物理像素比
多倍图
背景缩放background-size
4.移动端开发选择
4.1 单独移动端页面(主流)
4.2 响应式兼容PC移动端
5、移动端技术解决方案
移动端浏览器
5.1移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css:保护了有价值的默认值
Normalize.css:修复了浏览器的bug
Normalize.css:是模块化的
Normalize.css:拥有详细的文档
官网地址: http://necolas.github.io/normalize.css/
5.2 CSS3 盒子模型 box-sizing
5.3特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
1.点击高亮我们需要清除清除 设置为transparent 完成透明
*{ -webkit-tap-highlight-color: transparent;}
2.在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式
input { -webkit-appearance: none;}
3.禁用长按页面时的弹出菜单
img,a { -webkit-touch-callout: none; }