移动适配布局
1. 像素有关
1.1 设备像素（物理像素 ）
-
显示器的最小物理单位（对于一个显示器来说是固定的）
-
以手机屏幕为例，屏幕上的真实像素点。iphone6 的设备像素 750 * 1334
-
通常说的4K显示屏指的是 4096x2160。（像素多少是由生产厂商生产决定的），就是设备像素，物理像素。
1.2 CSS像素
-
CSS 中的长度单位，在 CSS 中使用的 px 都是指 CSS 像素，width：200px。
-
在页面不缩放的情况下，1px的CSS像素 === 1设备像素===1物理像素
-
页面放大200%时，页面的设备物理像素依旧不变，放大的是CSS像素。但是此时CSS像素与设备物理像素的关系变化了，1css像素 === 4设备物理像素（宽x2，高x2两个方向都放大）
1.3 设备独立像素(独立像素)（虚拟的窗口）
-
可以通过 window.screen.width/ window.screen.height 查看 375
-
操作系统定义的一种长度单位。iphone6 的设备独立像素，
设备（手机）的宽度是固定的，不是将网页设置的css宽度直接压缩到设备宽度上，而是另外一个像素概念--设备独立像素
sk.jpg
早期网页版心980px。
设备像素：获取设备屏幕宽/高window.screen.width/height 控制台切换到手机端，宽高也会跟着变化。
设备独立像素：window.innerWidth，对于PC没有设备独立像素的概念，PC端就是视口的显示的宽度，手机端则始终是个固定的值--设备独立像素，980或1000等。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这段代码是视口的配置：代表自适应，viewport就是视口，处理视口的宽度为设备的宽度，缩放比例是1.0
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口的配置:没有这段代码，移动端窗口就不会自适应，就会出现滚动条，比如iphone5 320px 而css宽度是980px -->
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: auto;
}
#box {
width: 980px;
height: 200px;
background: pink;
font-size: 18px;
}
</style>
</head>
<body>
<div id="box">11111111</div>
</body>
1.4 PPI
- 指每英寸的物理像素数
- 以尺寸为5.8英寸（屏幕对角线长度）屏幕对角线上的像素点 / 对角线的英寸数
1.5 devicePixelRatio 设备像素比(dpr)
- devicePixelRatio指的是物理像素和设备独立像素的比 即1独立像素由多少物理像素渲染。
- window.devicePixelRatio可查看
- window.devicePixelRatio = 物理像素 / 独立像素
1.6 解决移动端1像素的问题
因为不同设备具有不同的dpr 所以,css1px 所代表的设备像素不同, 所以在有些设备上看到的粗,有些设备看到的细,如果解决一像素边框问题,
方法一
通过媒体查询,查询设备的dpr,根据dpr设置不同的宽度大小
#box{
height: 200px;
border-bottom:1px solid red;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
#box { border-bottom: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
#box{ border-bottom: 0.333333px solid blue }
}
缺点: 小数像素目前兼容性较差，一些以前的版本可能不支持。
理论上最小的单位是 1px。 所以会出现有的设备写 0.5px 无效（没有边框）的情况。
方法二: 借助伪元素缩放处理
.button:after{
content: "";
display: block;
height: 0;
border-top: #999 solid 1px;
width: 100%;
position: absolute;
top: 0;
right: 0;
transform: scaleY(0.5); /* 将 1px 的线条缩小为原来的 50% */
}
缺点: 不是所有设备的dpr都是2 所以固定缩放0.5 也会有问题
方法三借助媒体查询和伪元素缩放来解决
// 定义mixin
.border-1px(@color: rgba(7,17,27,0.2)){
position:relative;
&:after{
display:block;
position:absolute;
left:0;
bottom:0;
content:'';
width:100%;
border-top:1px solid @color;
}
}
// 根据不同的dpr 使用不同的缩放
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
.border-1px {
.border-1px;
&:after {
-webkit-transform: scaleY(0.7);
-moz-transform: scaleY(0.7);
-ms-transform: scaleY(0.7);
-o-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
.border-1px {
.border-1px;
&:after {
-webkit-transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
-o-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
.border-1px {
.border-1px;
&:after {
-webkit-transform: scaleY(0.3);
-moz-transform: scaleY(0.3);
-ms-transform: scaleY(0.3);
-o-transform: scaleY(0.3);
transform: scaleY(0.3);
}
}
}
2. viewport
2.1 什么是视口
在移动端viewport视口就是浏览器显示页面内容的屏幕区域,
在viewport中有两种视口,分别表示为 :
- visual viewport (可视视口) 正常屏幕视口
- layout viewport (布局视口) 设备独立像素 默认980px
两个视口是叠加在一起
visual viewport 固定大小跟屏幕大小相同, 可以通过window.innerWidth 来获取.
layout viewport 可改变大小, 默认大小为980像素, 可以通过document.documentElement.clientWidth 获取
视口默认的宽度是980px,我们可以用meta标签来舒服视口看度.此时视口宽度被束缚为320-480之间（不同的手机）
现代网页需要将layout viewport 设置成跟visual viewport 相同的大小,方便网页制作
2.2 视口的设置
通过<meta>标签进行设置,name属性指定viewport的值,content属性进行视口配置
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=false,maximum-scale=2.0" >
| 取值 | 含义 |
|---|---|
| width | 设置layout view的宽度为特定值 device-width表示设备的宽度 |
| height | 设置layout view的宽度为特定值,一般不设置 |
| initial-scale | 设置页面初始缩放 |
| minimum-scale | 设置页面最小缩放 |
| maximum-scale | 设置页面的最大缩放 |
| user-scalable | 设置页面能否缩放 允许user-scalable=true ，不允许user-scalable=false |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对IE浏览器，尽量选择IE=edge -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=false,maximum-scale=2.0">
<!--原信息 视口原信息 内容宽度layout viewport设备独立像素视口宽度等于设备的视口宽度。user-scalable=false 不允许缩放 -->
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: auto;
}
#box {
width: 980px;
/* 如果超出设备宽度就会出现滚动条，不超就没有滚动条 */
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box">ddddddddd</div>
</body>
</html>
3.适配
3.1、为什么要做适配
a) 为了适应各种移动端设备，完美呈现应有的布局效果
b) 各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放
现在主流的开发思路
- PC端 和移动端 分开开发
- 如果想在既能适应PC、又能适应移动端 响应式开发（麻烦 写好多套css ）
3.2、自适应适配方案(布局方案)
3.2.1 先了解一些单位
-
em: 相对单位, 1em等于当前元素的font-size值
-
rem 相对单位 r -> root 根节点( html ) 根据html的字体大小计算其他元素尺寸 1rem 就是html的font-size值
-
vw/vh ; 把屏幕分为100份, 1vw就等于屏幕宽度的1%。也就是元素的宽高根据屏幕尺寸来定的。
width：300%；宽度值为百分比时是相对于父级宽度值的。
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
background-color: pink;
}
#wrap {
width: 50vw; /* 元素的宽度根据视口来定 */
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box">
<div id="wrap"></div>
</div>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--缩放比例：移动端css像素自适应设备像素 -->
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 50vw;
/*宽度始终是屏幕的一半*/
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
3.2.2 媒体查询布局方式
meida queries 的方式可以说是早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--缩放比例：移动端css像素自适应设备像素 -->
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: auto;
}
#box {
height: 200px;
background: pink;
}
/* 媒体查询做适配 */
@media screen and (width: 320px) {
#box {
width: 160px;
}
}
@media screen and (width: 375.2px) {
#box {
width: 187.5px;
}
}
@media screen and (width: 414px) {
#box {
width: 207px;
}
}
@media screen and (width: 414px) {
#box {
width: 207px;
}
}
@media screen and (width: 768px) {
#box {
width: 384px;
}
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
优点
- 方法简单，成本低，特别是对移动和PC维护同一套代码的时候。
- 调整屏幕宽度的时候不用刷新页面即可响应式展示
缺点
- 代码量比较大，维护不方便
- 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
- 为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式
3.2.3 百分比与Flex布局（百分百与弹性盒模型是目前常用的布局方式）
布局的特性: 关键元素高宽和位置都不变，只有容器元素在做伸缩变换
这种布局是一种典型的弹性布局
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#box {
display: flex;
/* 弹性盒模型 */
flex-wrap: wrap;
/*换行*/
justify-content: space-around;
/*水平对齐*/
width: 90%;
/* height: 200px;高度不固定，不需要啦 */
background-color: pink;
margin: 0 auto;
}
li {
width: 80px;
height: 80px;
background-color: skyblue;
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul id="box">
<li>观察文字大小</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
布局的方式:
- 布局盒子采用百分比
- 容器盒子与文字采用固定大小
- Flex 确定位置(也可以采用浮动)
优缺点:
- 好处: 大屏下可以展示更多内容
- 坏处: 宽屏下比例会比较不协调
注意: 这种情况css尺寸单位用px就好，不要用rem，避免增加复杂度。
例子: 拉勾网
3.2.4 rem布局方式
布局的特性: 关键元素盒子大小与文字都随着屏幕大小不同,而展示不同的大小
布局的方式:
- 根据屏幕大小不同设置html不同的字体大小
- 所有的盒子尺寸和文字大小采用rem的布局方式
<!DOCTYPE html>
<html lang="en" style="font-size: 10px;">
<!-- rem布局 font-size如果写死，box的width就是固定的了，不能自适应。所以font-size需要动态的-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#box {
width: 30rem;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<ul id="box">
</ul>
</body>
</html>
动态设置font-size，设置方式，常用的是通过JS
首先找一个基准屏幕iphone6/7/8 375px
var fontSize= document.documentElement.clientWidth /3.75 //获取当前屏幕的宽度/ 3.75
document.documentElement.style.fontSize = fontSize + 'px'
字体也可以不使用rem单位(通常也不建议字体用rem单位), 采用不同的媒介方式,
@media screen and (max-width:321px){
.basesize{font-size:15px}
}
@media screen and (min-width:321px) and (max-width:400px){
.basesize{font-size:16px}
}
@media screen and (min-width:400px){
.basesize{font-size:18px}
}
如果只是希望盒子根据屏幕大小不同而改变, 但是文字大小不改变,可以在body重新固定文字大小
body{
font-size:16px;
}
rem的布局--使用js动态设置font-size方式布局
<!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, initial-scale=1.0">
<title>Document</title>
<script>
var fontSize = document.documentElement.clientWidth / 3.75 //基准屏的font-size为100px，整数好开发。不同宽度的屏幕，font-size会自动计算。rem布局 font-size如果写死，box的width就是固定的了，不能自适应
document.documentElement.style.fontSize = fontSize + 'px'
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
}
#box {
width: 1.875rem;
/*占屏幕的一半 */
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box">ddddddddd
</div>
</body>
</html>
代表网站: 网易, 美团
rem另一种使用vw单位布局写法--代表网易
<!DOCTYPE html>
<!-- 网易不使用js处理基准值，使用vw处理基准值 一份是375/100 共有 100/3.75 份 -->
<html lang="en" style="font-size:26.666vw;">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
}
#box {
width: 1.875rem;
/*占屏幕的一半 */
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box">ddddddddd
</div>
</body>
</html>
3.2.5 缩放布局方式
.固定高度宽度.文字大小，通过改变缩放比例适配
根据屏幕的分辨率动态设置适配缩放比例，达到等比缩放的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<script>
let baseWidth = 375;//定义基准页面进行开发，然后以这个基准页面为准进行缩放
let screeWidth = window.screen.width;//获取当前设备屏幕宽度
console.log(screeWidth)
let scale = screeWidth / baseWidth;//缩放比例=屏幕宽度/基准值
console.log(scale);
let meta = document.createElement('meta')//创建meta标签
meta.setAttribute('name', 'viewport')// 添加name属性也可以meta.name='viewport'
//添加content属性
meta.setAttribute('content', `width=${baseWidth},initial-scale=${scale},minimun-sacle=${scale},maximun-scale=${scale},user-scalable=no`);
document.head.appendChild(meta)//将meta标签添加到页面上 实现适配当前手机屏幕的宽度，视口宽度等于设备宽度，不出现滚动条或空白区域了
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: auto;
/* 超出自动加滚动条 */
}
#box {
width: 375px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box">ddddddddd</div>
</body>
</html>
根据dpr来设置不同的viewport缩放比例
// 改变视口的缩放比例
(function(){
// 方法一
var width = window.screen.width;
var fixedW = 375;
var scale = width / fixedW;
var meta = document.createElement('meta');
meta.setAttribute('name','viewport');
meta.setAttribute('content',`width=${fixedW},initial-scale=${scale},minimun-sacle=${scale},maximun-scale=${scale},user-scalable=no`);
document.head.appendChild(meta);
})()
如果是double设计图(双倍屏,真实的设备上有双倍的像素点)
// 改变视口的缩放比例
(function(){
// 方法一
var width = window.screen.width;
var fixedW = 375;
var scale = width / fixedW * 0.5;
var meta = document.createElement('meta');
meta.setAttribute('name','viewport');
meta.setAttribute('content',`width=${fixedW},initial-scale=${scale},minimun-sacle=${scale},maximun-scale=${scale},user-scalable=no`);
document.head.appendChild(meta);
})()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<script>
let baseWidth = 375;//定义基准页面进行开发，然后以这个基准页面为准进行缩放
let screeWidth = window.screen.width;//获取当前设备屏幕宽度
let scale = screeWidth / baseWidth * .5;//基准值保留375,这里要缩小.5倍.缩放比例=屏幕宽度/基准值
let meta = document.createElement('meta')//创建meta标签
meta.setAttribute('name', 'viewport')// 添加name属性也可以meta.name='viewport'
//添加content属性
meta.setAttribute('content', `width=${baseWidth},initial-scale=${scale},minimun-sacle=${scale},maximun-scale=${scale},user-scalable=no`);
document.head.appendChild(meta)//将meta标签添加到页面上 实现适配当前手机屏幕的宽度，视口宽度等于设备宽度，不出现滚动条或空白区域了
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: auto;
/* 超出自动加滚动条 */
}
#box {
width: 750px;
/* UI给的设计图一般750px 放大2倍*/
height: 400px;
/*放大2倍*/
font-size: 32px;
/*字体也放大2倍*/
background-color: pink;
}
</style>
</head>
<body>
<div id="box">ddddddddd</div>
</body>
</html>
3.3 通过vw设置 html 字体
以iphone6为例 375px=100vw 1vw = 3.75
如果我希望 html的字体大小是100px
html{
font-size:26.6666667vw;
}
如果切换到iphone 6plus 1vw = 4.41px
注意, 要给body重置一下font-size: 16px;
3.4 其他小技巧
3.4.1固比固
三栏布局,
利用box-sizing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
position: relative;
box-sizing: border-box;
/* 怪异盒模型 */
padding: 0 50px;
width: 100%;
height: 60px;
background-color: skyblue;
}
#left,
#right {
width: 50px;
height: 40px;
;
background-color: red;
}
#left {
position: absolute;
top: 0;
left: 0;
}
#right {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"></div>
<div id="middle">
左右固定50 中间部分放大缩小</div>
<div id="right"></div>
</div>
</body>
</html>
利用flex
#box{
width: 100%;
height: 60px;
display:flex;
}
#box .left{
width:60px;
height: 100%;
background-color: red;
}
#box .content{
flex:1;
height: 100%;
background-color: blue;
}
#box .right{
width:60px;
height: 100%;
background-color: yellow;
}
3.4.2 设置高度按比例变换
- 不设置高度
盒子不设置高度,图片宽度100%,高度默认按比例缩放
2.采用padding-top给盒子设置自动,然后用背景图
一个元素的padding、margin值的百分比是相对于父元素的宽度的百分比。
借用padding-top来处理,我们知道padding也可以显示背景
width: 60%;
height: 0;
padding-top:60%;
padding-bottom也可以但是,padding-top更好一点 ,因为可以overflow:hidden ;关闭超出的部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
* {
margin: 0;
}
#img-wrap {
position: relative;
padding-top: 50%;
background-color: pink;
}
#img {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0)
}
</style>
</head>
<body>
<!--避免 图片有时加载速度很慢,可能会一点点加载，会破坏布局 -->
<div id="img-wrap">
<img id="img" height="207" src="./images/3333.jpg" alt="">
<!--图片不显示时,该有的占位还存在 -->
</div>
<div> 大家好</div>
</body>
</html>
3.通过js
var boxWidth = parseInt(getComputedStyle(box)['width']);
box.style.height = boxWidth+'px'
补充:
http://gs.statcounter.com 浏览器市场占比
https://h5.m.taobao.com/#index 手机淘宝 rem http://m.jd.com/ 手机京东 100% http://jx.tmall.com/ 天猫 100% http://3g.163.com/touch/all?nav=1&version=v_standard 网易 rem
http://www.cnblogs.com/2050/p/3877280.html viewport 解析 meta解析 http://ljinkai.github.io/2015/06/06/mobile-web-skill/ 移动端布局注意技巧
网友评论