移动端布局技巧 ？
大约 10 分钟
- 兼容移动端主流浏览器，只需要处理
webkit内核浏览器即可- 移动端碎片化比较严重，分辨率核屏幕尺寸大小不一 屏幕数据
视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口，视觉视口和理想视口。
布局视口 layout viewport
- 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的 PC 端页面在手机上显示的问题。
- IOS,Android 基本都将这个视口分辨率设置为 980px,所以 PC 上的网页大多都能在手机上呈现，只不过看上去很小，一般默认可以通过手动缩放网页。
视觉视口 visual viewport
- 字面意思，他是用户正在看到的网站区域。注意：是网站的区域
- 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度
理想视口 ideal viewprot
什么是理想视口？
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定
- 理想视口，对设备来讲，是最理想的视口尺寸
- 需要手动添加 meta 视口标签通知浏览器操作
- meta 视口标签的主要目的：布局视口的宽度应该与理想视口的宽度保持一直，简单理解就是设备有多宽，我们布局的视口就有多宽
meta 视口标签
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是 viewport 宽度，可以设置 device-width 特殊值 |
| initial-scale | 初始缩放比，大于 0 的数字 |
| maximum-scale | 最大缩放比，大于 0 的数字 |
| minimum-scale | 最小缩放比，大于 0 的数字 |
| user-scalable | 用户是否可以缩放，yes 或 no(0 或 1) |
标准的 viewport 设置
<meta
name="viewport"
content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
/>
<!--
视口宽度和设备保持一致
视口默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0
-->
物理像素和物理像素比
物理像素是指屏幕显示的最小颗粒，是物理真是存在的。这是厂商在出厂时就设置好了，比如苹果 6\7\8 是 750*1334一个 px 能显示的物理像素点的个数，称为
物理像素比或屏幕像素比PC 端页面，1 个 px 等于 1 个物理像素，但是移动端就不尽相同（PC 端和早期的手机屏幕/普通手机屏幕：1CSS 像素=1 物理像素）
Retina(视网膜屏幕)是一种显示技术，可以将更多的物理像素点压缩在一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
注意：我们开发时候的 1px 不一定等于 1 个物理像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
/>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;d
height: 300px;
color: #fff;
background-color: blue;
}
</style>
</head>
<body>
<div>
这是一个300*300的盒子，我们可以看看他在PC端和手机端显示有什么不同。(PC端正常显示，移动端字体很小，影响正常阅读)
</div>
</body>
</html>
倍图
- 对于一张 50*50px 的图片，在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。
- 在标准的 viewport 设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。
- 通常使用二倍图，因为 iphone6\7\8 的影响，但是现在还存在 3 倍图、4 倍图的情况，这个看实际开发公司的需求。
一、 认识 rem
- rem(root em)是一个相对单位，类似于 em。
- em 的基准是
相对父元素字体大小的乘积。例：父元素 font-size:10px,子元素 width：2em;就相当于 width:20px
<style>
div {
font-size: 12px;
}
p {
/* em的基准是相对父元素字体大小的乘积。 */
/* width: 120px; */
/* height: 120px; */
width: 10em;
height: 10em;
background-color: aquamarine;
}
</style>
- rem 的基准是
相对于html元素的字体大小的乘积。例:html 元素 font-size:10px,非根元素设置 width:2rem;就相当于 width:20px
<style>
html {
font-size: 15px;
}
p {
/* rem是相对于html根元素的字体大小的乘积 */
/* width: 150px;
height: 150px; */
width: 10rem;
height: 10rem;
background-color: aquamarine;
}
</style>
- rem 优点： 可以通过修改 html 根元素的 font-size 来改变页面的内的元素内容的大小，达到整体控制，前提是页面内容的单位必须使用 rem
媒体查询
什么是媒体查询？
- 媒体查询（Media Query）是 CSS3 新语法
- 媒体可以针对不同的屏幕尺寸设置不同的样式
- 例：当你重置浏览器大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面，目前针对很多苹果手机、android 手机、平板设备都用到多媒体查询
语法规范
<style>
/* 这句话的意思就是：在我们屏幕上 并且 最大宽度是 800像素 设置我们想要的样式 */
/* max-width 表示最大不大于(包括等于)800px*/
/* 媒体查询可以根据不同的尺寸改变不同的样式 */
@media screen and (max-width: 800px) {
body {
background-color: aqua;
}
}
@media screen and (max-width: 700px) {
body {
background-color: blueviolet;
}
}
</style>
- 用
@media开头 mediatype媒体类型，将不同的终端划分成不同的类型
| 值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机 |
- 关键字
and、not、only,关键字将媒体类型或多个媒体特性连接在一起作为媒体查询的条件
| 值 | 解释说明 |
|---|---|
| and | 可以将多个媒体特性连接到一起，相当于“且”的意思 |
| not | 排除某个媒体类型，相当于“非”的意思 |
| only | 指定某个特定的媒体类型，可以省略 |
media feature媒体特性，每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。
| 值 | 解释说明 |
|---|---|
| width | 定义输出设备中页面可见区域宽度 |
| min-width | 定义输出设备中页面最小可见区域宽度 |
| max-width | 定义输出设备中页面最大可见区域宽度 |
媒体查询书写规范
- 媒体查询最好按照从小到大来书写
- 数字后面必须跟单位。如：700px 后面的 px 不能省略
- 使用关键字时，关键字的前后必须添加空格。例：@media screen and (max-width: 800px) and 前后必须有空格
- 引入资源就是针对不同的屏幕尺寸调用不同的 css 文件
/* 引入资源就是针对不同的屏幕尺寸调用不同的css文件
此代码的意思是当屏幕不低于320px时(达到320px或以上)调用某个CSS文件
此代码的意思是当屏幕不低于640px时(达到640px或以上)调用某个CSS文件
*/
</style>
<!-- 当屏幕尺寸达到320px以上时 -->
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<!-- 当屏幕尺寸达到640px以上时 -->
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
rem 适配方案
rem 适配解决方案描述：让一些不能等比自适应的元素，当设备尺寸发生改变的时候，等比例适配当前设备。
rem 适配解决方案步骤：
- 使用媒体查询根据不同设备按比例设置 html 的字体大小
- 页面元素尺寸单位使用 rem
- 当 html 字体大小变化时，元素尺寸也会发生变化,最终达到等比缩放的适配
rem 实际开发中的适配方案
- 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）
- CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；
rem 适配方案选择（市场主流）
1. less + 媒体查询 + rem
- 设计稿常见尺寸宽度
- iPhone：750px 左右、Android:720px 左右
- 一般情况下，我们以一两套效果图适应大部分的屏幕，放弃极端屏对其优雅将级，牺牲一些效果，现在基本以 750px 为准
- 动态设置 html 标签 font-size 大小
- 假设设计稿是 750px
- 此时我们可以把整个屏幕划分为 15 等份（也可以是任意等份，15 等份只是为了方便计算）
- 当屏幕在 750px 时，html 内 font-size 手动设置为 50px（750px / 15 份）
- 当屏幕在 320px 时，html 内 font-size 手动设置为 21.33px（320px / 15 份）
- 在 750px 下，一个 100*100px 盒子的 rem 值需要我们手动设置为 2rem(100px / 50px)，此盒子实际显示的大小为 100px（2rem * 50px）
- 在 320px 下，这个 100*100px 的盒子的大小会根据我们设置好的 rem 值自动计算大小 42.66px（2rem * 21.33px），并且同比例缩放
html根元素中的font-size计算公式 = 屏幕宽度px / 划分的份数
页面元素的rem值计算公式 = 页面元素值px / html根元素中的font-size
2. flexible.js + rem （此方案更简单）
移动端解决方案有哪些？
单独制作移动端页面（主流）
如：京东商城手机版、淘宝触屏版、苏宁易购手机版
通常情况下，网站域名前面加 m(mobile)可以打开移动端 。通过判断设备，如果是移动设备打开，则调到移动端页面。
响应式页面兼容移动端（其次）
如：三星手机官网
缺点：制作麻烦，需要花很大精力去调兼容性问题。
移动端常见布局
- 流式布局（百分比布局）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
width: 100%;
height: 500px;
max-width: 980px;
min-width: 320px;
margin: 0 auto;
padding: 25px;
background-color: deepskyblue;
}
section div:nth-child(1) {
float: left;
width: 49%;
height: 450px;
background-color: coral;
}
section div:nth-child(2) {
float: right;
width: 49%;
height: 450px;
background-color: coral;
}
- 流式布局，就是百分比布局，也称非固定像素布局
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
- 流式布局方式是移动 web 开发中比较常见的布局方式
- flex 弹性布局（强烈推荐）
- less+rem+媒体查询布局
- 混合布局
- 响应式布局
移动端的特殊样式
/* css3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
a {
/* 点击高亮我们需要清除 设置transparent 完成透明 */
-webkit-tap-highlight-color: transparent;
}
input {
/* 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
}
img,
a {
/* 禁用长按页面时弹出的菜单 */
-webkit-touch-callout: none;
}