移动端布局
Posted cxf1214
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端布局相关的知识，希望对你有一定的参考价值。
1移动端布局
rem布局+媒体查询+弹性盒
媒体查询；
匹配不同的设备宽度从而加载不同的css样式 注意地下的空格 不要删除，不然不出效果
@media only screen and (min-width:360px)
body
background:yellow;
@media screen and (min-width:320px) and (max-width:375px)
body
background:yellow;
screen: 代表是屏幕：pc 移动端 平板
all 代表所有设备
orientation：portrait; 竖屏
orientation：landscape; 横屏
断点
375px 最常用
Meta 标签的设置（设配移动端必备标签）
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
width=device-width 设备宽度
initial-scale=1 缩放比例
user-scalable=no 禁止用户缩放
移动端的单位
px ,% ,em， rem
rem ： 相对于根元素!的字体大小
默认： 1 rem=16px
如果改根元素的大小，就是改html
html
font-size:20px;
div
font-size:2rem;
ppi dpi dpr
ppi 每英寸拥有的像素数量
dpr 设备像素比=物理像素（设备显示）/逻辑像素（css设置的）
UI设计师给你的是2倍图, 拿过来之后除以2
200px 200px
img
width;100px;
height:100px;
结论：
3倍图 是 dpr
300px 300px 物理像素
img
width:100px
height;100px 逻辑像素
压缩来配适高清屏 充不满就会失帧
移动端设计图大小集中在；640px 750px ,1080px 根据设计图大小确定dpr 的值
设计图640px 考虑dpr 为2
设计图1080px 考虑dpr 是3
字体大小还是用像素 px
字体图标库 添加图标用i 标签 选择font class
例如： <i class="iconfont icon-shouye">
<span>首页</span>
居中：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box
width: 700px;
height: 700px;
border: 1px solid red;
position: relative;
.box>img
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
</style>
</head>
<body>
<div class="box">
<img src="../img/1.png"/>
</div>
</body>
</html>
1.单位 vw vh （小程序经常用）
就是 viewportwidth vw 视口的宽度 ：100vw 是视口的宽度的100%
,viewportheight vh 视口的高度
2.100vw 和100% 是不一样的；
100vw: 包含滚动条，就是会出现滚动条
100% ：
3.vmax 视口最大 , vmin 视口最小
4.按照iphone6 的标准行换算
375px=100vw
100px =26.67vw
.按照iphone5 进行换算
320px=100vw
100px =31.25vw
html
font-size:26.67vw;
引入js 来 然后将量的高度向前进俩位 88厘米 就是0.88rem
以上是关于移动端布局的主要内容，如果未能解决你的问题，请参考以下文章