一, 适配问题解决方案: 流式布局 + viewport
1, 流式布局
百分比布局, 通过设置盒子的宽度为百分比来根据屏幕的大小进行伸缩, 特点是不受固定像素的限制, 内容向两侧填充
2,viewport
在移动端用来承载网页的这个区域, 就是我们的视觉窗口, 也叫 viewport(视口), 这个区域可设置高度宽度, 可按比例放大缩小, 而且能设置是否允许用户自行缩放.
让浏览器知道设置了 viewport,viewport 只在移动端识别
3,viewport 参数
width: 定义 viewport 的宽度, 有一个特殊值 device-width 当前设备的宽度
initial-scale: 默认的初始缩放比
设置 1.0, 和 PC 端页面的显示比例一致, 一比一显示在移动端
user-scalable: 是否允许用户自行缩放 1-yes,0-no
maximum-scale: 最大缩放比
minimum-scale: 最小缩放比
4, 构建标准的移动端 web 开发页面
快捷键 - meta:vp
二, 在写项目要注意的问题
base 样式定义: reset CSS 重置默认的, 浏览器自带的一些样式 (所有的标签和伪类), 目的是保持各种终端显示一致
1, 在移动端特殊的设置
①清楚点击高亮效果
-webkit-tap-highlight-color: transparent;
②设置所有的盒子的宽度以边框开始计算
在移动端通常使用的是百分比布局, 那么这样的布局如果使用 border 或者 padding 会使容器的宽度超出屏幕的宽度产生滚动条.
- webkit - box - sizing: border - box;
box - sizing: border - box;
③清除 input 默认的样式
webkit-appearance: none;
2, 最小宽度, 最大宽度的限制
min-width:300px; // 适配小屏幕设备, 为了有较好的布局效果.
max-width:640px;// 保证页面在尺寸比较大的设备当中保证页面的效果也就是清晰度
3, 物理像素和图标模糊度问题
解决方案, 采用压缩图标尺寸的方式来解决.
如果是 Img 使用直接设置宽高的方式来压缩.
如果是背景使用的是设置 background-size 的方式来压缩
4, 搜索按钮调用
在移动端调用输入法, 弹出的小键盘 enter 键会变成搜索按钮
5, 结构性伪类原则器 --- 同类型选择器
E:first-of-type 匹配同类型中的第一个元素 E.
E:last-of-type 匹配同类型中的最后一个元素 E.
E:nth-of-type(n) 匹配同类型中的第 n 个元素 E.
来源: http://www.bubuko.com/infodetail-2482860.html