移动端开发vw+rem布局,即等比缩放布局(什么是vw?如何设置根元素html的字体大小?如何换算vw单位?文末:移动端开发步骤详解链接)
1 什么是vw?
vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。能够实现页面内的字体大小跟随视口的大小而改变。
1vw 视口宽度的1%
100vw 视口宽度的100%
1vh 视口高度的1%
100vh 视口高度的100%
2 为什么要将根元素html字体大小设置为100px?
是为了方便计算。
我们都知道,根元素默认的字体大小是12px,即 html{font-size:12px;}
那在默认的情况下,如果我们在二倍图的设计稿上量取的是88px,除以2,就为44px,再除以12,会得到除不尽的小数。而且除以12不好计算。
但是可能有人会觉得除以10也好计算,为什么不取10呢?原因是12px已经是font-size的最小值了。
所以除以100是比较合适的,因为只需要小数点向前移动两位。
html{ font-size:100px; }
3 如何把100px换算成vw?(根据设计稿机型换算vw)
根据设计稿的手机型号来进行换算。
如何判断UI给的二倍图的设计稿是什么手机型号呢?
例子: 用ps之类的软件打开UI给的二倍图的设计稿,如果测量得到的是750px,除以2后就是 375px,即该设计稿的机型是iPhone6。
现在我们知道的设计稿是什么机型,那就可以开始换算vw单位了。
- 根据设计稿iphone5:320px=100vw
根元素最终设置为:html{font-size:31.25vw;}
换算演示: 1px=100vw/320px=0.3125vw 100px=31.25vw 这样就完成了100px换算成对应屏幕大小的单位为vw的数值。iphone6的vw换算也是同理。
- 根据设计稿iphone6:375px=100vw(现在大部分的设计稿是iphone6)
根元素最终设置为:html{font-size:26.67vw;}
移动端开发步骤详解:https://blog.csdn.net/m0_59850169/article/details/119388317
关于什么是vw的更详细说明:https://blog.csdn.net/weixin_39860108/article/details/111808198
原文链接:https://blog.csdn.net/m0_59850169/article/details/119427618
文章介绍
移动端常用的布局流式布局(百分比布局)、等比缩放布局;
流式布局
1 顾名思义,流式布局就是页面内容想水一样会流动,在不同分辨率的屏幕下显示不同内容排版。还会配合(媒体查询),获取屏幕的分辨率,设置不同的效果。
2 核心思想是设置固定的宽度以及运用弹性盒的一些属性实现,主要代码如下:
```
// 应用弹性盒的换行属性和等分间距属性;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
```
3 实验代码及效果
```html 结构
<section>
<div>实验的内容内容</div>
<div>实验的内容内容</div>
<div>实验的内容内容</div>
<div>实验的内容内容</div>
<div>实验的内容内容</div>
<div>实验的内容内容</div>
<div>实验的内容内容</div>
<div>实验的内容内容</div>
<div>实验的内容内容</div>
</section>
```
```
*{margin: 0; padding: 0;}
html{
font-size: 26.67vw;
height: 100%;
}
body{
height: 100%;
font-size: 16px;
display: flex;
flex-direction: column;
}
header{
/* width: 100%; */
height: 100px;
background: gray;
}
section{
/* width: 100%; */
/* height: 0.9rem; */
flex: 1;
background: pink;
overflow: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
footer{
/* width: 100%; */
height: 100px;
background: black;
}
div{
box-sizing: border-box;
width: 200px;
height: 200px;
font-size: 0.05rem;
background: red;
border: 1px solid black;
}
```
不容屏幕分辨率下显示不同的排版
![效果图](https://img-blog.csdnimg.cn/20200109154728785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RPVF9aWkc=,size_16,color_FFFFFF,t_70)
![效果图](https://img-blog.csdnimg.cn/20200109155118332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RPVF9aWkc=,size_16,color_FFFFFF,t_70)
等比缩放布局:
1 等比缩放布局就是让内容随着屏幕分辨率大小变化而变化。
2 这种布局的核心思想就是通过设置百分比尺寸&#