欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

移动端布局

程序员文章站 2022-03-08 16:03:00
一.页面结构布局1.百分比布局。2.弹性盒布局。3.分栏布局。4.响应式布局。移动端布局为多种布局结合使用,达到完美适配效果二.单位1.px2.百分比3.em 相对单位,基于自身字体大小font-size来计算,所以不同的元素1em代表的具体大小可能不同(部分浏览器的默认字体大小为16px)4.vw viewport width,视窗宽度,1vw等于视窗宽度的1%5.vh viewport height,视窗高度,1vh等于视窗高度的1%注意:使用vw/vh,需设置met...

一.页面结构布局

1.百分比布局。2.弹性盒布局。3.分栏布局。4.响应式布局。

移动端布局为多种布局结合使用,达到完美适配效果

二.单位

1.px

2.百分比

3.em 相对单位,基于自身字体大小font-size来计算,所以不同的元素1em代表的具体大小可能不同(部分浏览器的默认字体大小为16px)

4.vw viewport width,视窗宽度,1vw等于视窗宽度的1%

5.vh viewport height,视窗高度,1vh等于视窗高度的1%

注意:使用vw/vh,需设置meta缩放比1:1 IE9+局部支持,chrome/firefox/safari/opera支持,ios safari8+支持,android browser4.4+支持,chrome for android39支持

三.viewport

1.移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域

2.各大手机的viewport大小 

3.布局视口(layout viewport) 以屏幕分辨率为基准,实际上布局视口的宽度要比屏幕宽出很多,以上图片显示的尺寸就是 layout viewport

4.视觉视口(visual viewport) layout viewport 的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表 浏览器可视区域的大小,这个viewport叫做visual viewport。在js中可以通过window.innerWidth来获取

5.理想视口(ideal viewport)

一个能完美适配移动设备的视口,需要手动添加meta标签,一般视口大小都设置为设备大小

<meta name="viewport" content="width=device-width">

6.meta标签属性

①.width 设置layout viewport 的宽度,为一个正整数,或字符串”device-width”

②.initial-scale 设置页面的初始缩放值,为一个数字,可以带小数

③.minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数

④.maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数

⑤.user-scalable 是否允许用户进行缩放

no代表不允许

yes代表允许

四.动态设置字体大小及viewport

<script type="text/javascript"> // 把尺寸放大N倍(N是window.devicePixelRatio) //物理像素*设备像素比=真实像素 var wd = document.documentElement.clientWidth*window.devicePixelRatio/10; document.getElementsByTagName("html")[0].style.fontSize = wd + "px"; // 把屏幕的倍率缩小到N分之一(N是window.devicePixelRatio) var scale = 1/window.devicePixelRatio; var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no'; document.getElementById("vp").content = mstr; </script>

本文地址:https://blog.csdn.net/qq_37049128/article/details/107512317