移动端布局?
移动端模拟器: 切换平台后,一定要重新刷新浏览器。
去访问一些网站的PC端和移动端:
大一点的网站都是分开开发的,PC端一套代码,移动端一套代码。如
访问淘宝网 -> 后端检测当前设备 -> 如果是PC端 -> www.taobao.com
访问淘宝网 -> 后端检测当前设备 -> 如果是移动端:
www.taobao.com -> 重定向 -> h5.m.taobao.com
Viewport视口
注意:只有移动端才有Viewport视口,Viewport视口就是浏览器显示页面内容的屏幕区域。在Viewport中有两种视口,分别表示为visual viewport(可视视口)和layout viewport(布局视口),两个视口是叠加在一起的。
visual viewport固定大小跟移动设备的屏幕大小相同(如i8的375*667),在上面;而layout viewport可改变大小(默认为980px),在下面。就是以往,会把980px的PC端整个网页压缩在移动端的visual viewport里,但现在不用压缩了,因为有专门针对移动端的一套设计即设置viewport。Layout viewport默认大小为980像素,可通过document.documentElement.clientWidth获取。
现代网页需要将layout viewport设置成跟visual viewport等同大小,方便进行网页制作。
viewport设置
通过<meta>标签进行设置,name属性指定viewport值,content属性进行视口配置。
取值 | 含义 | |
width | 设置layout viewport的宽度特定值,当值为device-width表示自适应设备的宽度 | |
height | 设置layout-viewport的高度特定值,一般不进行设置 | |
initial-scal | 设置页面的初始缩放,值为1.0表示不进行缩放 | |
minimum-scal | 设置页面的最小缩放 | |
maximum-scale | 设置页面的最大缩放 | |
user-scalable | 设置页面能否进行缩放,值为no表示不允许用户进行缩放 |
一般在html的头部会进行这样一个整体的设置:<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”>
移动端适配方案?
1. 百分比布局,也叫流式布局。代表网站:优酷、百度、天猫、腾讯。
元素大小是不会变化的,只是设备屏幕的大小不同会导致元素的间距发生变化
2. 等比缩放布局,也叫rem布局。代表网站:网易、爱奇艺、淘宝、美团。
设备屏幕小,元素就小一些,屏幕大则元素会大一些,但是元素的间距是不会变化的。
移动端的流式布局(百分比布局)原则:
好处:大屏幕下显示更多的内容 坏处:宽屏下比例会有一些不协调
主要是设置弹性布局display:flex;
移动端的rem布局(等比缩放布局)
即动态设置html的font-size,然后通过一个rem单位等于一个font-size单位来实现rem等比缩放布局。
单位:
em:是一个相对单位,1em等于当前元素或父元素的font-size值。若当前元素没有设置font-size,则一层一层网上找,直到有父元素设置font-size。
rem:是一个相对单位,1rem等于根元素(即html)的font-size值
vw/vh:把屏幕分成100份,1vw等于屏幕宽的1%
如何动态设置font-size?
- 通过JS
- 通过vw
第一种方法:(通过JS) 要在js里动态设置font-size,首先要获取viewport的屏幕大小,而获取view的屏幕大小是通过document.documentElement.clientWidth来获取的,所以在script标签里可以这样来获取:
<script>
var fontsize = document.documentElement.clientWidth / 3.75;
document.documentElement.style.fontSize = fontsize + ‘px’;
</script>
解析:i6的宽是375,除以3.75是110;i6 plus的宽是414,除以3.75是110.4;我们把获取到的屏幕宽度除以3.75得到的结果值赋给变量fontsize,然后将结果返回去给页面根元素。
然后若要设置某个div的大小,则可以使用相对单位rem来实现了,如i6下,给div设置width:1rem;height:1rem;则该div为100px*100px
px和rem的换算可以通过在vs code中下载插件px to rem。下载完成后单击px to rem右键设置换算单位如100,然后再html中通过alt+z快捷键来进行自动换算,也可以选中整篇html通过alt+z来将整篇的px换算为rem。
第二种方法:(通过CSS),vw为屏幕宽,vh为屏幕高。vw指把屏幕分为了100份宽,总宽为100vw。i6中为375px,那么1vm=3.73px,要得到100px则为26.666667vm。
注:要给body重置一下font-size:16px。因为html的rem只是用来换算的,而body里的字体要设置为font-size:16px;避免受html的影响。