移动端开发

移动端布局

这篇文章讲了百分比布局、rem布局以及响应式布局的使用。

百分比布局

百分比布局又叫流式布局，可以在大屏幕下显示更多内容，但是宽度有一点不协调

iphone6下显示
ipad下显示

由此可见，屏幕过宽时，百分比布局下一些宽度比例不协调。要解决这个宽度比例不协调的问题，需要使用rem布局。

rem布局

在学习rem布局前需要先了解什么是视口。

#viewport是什么？
view

• 布局视口layout viewport(可以修改)
  缩放时布局视口的CSS像素数量保持不变，只是体积发生变化，所以视觉上变大或变小。

• 可视视口 visual viewport（不能修改）
  视觉视口是指用户正看到的网页区域，大小等于屏幕中CSS像素的数量。页面缩放会对视觉视口的尺寸产生影响，当页面放大一倍时，CSS像素点的体积放大一倍，视口内的像素数量会减少一倍，如果缩小，则正好相反。
  

简单来说就是，如果我们的屏幕是375像素*667像素的大小（iPhone6），假设在浏览器中，320像素的屏幕宽度能够展示980像素宽度的内容。那么320像素的宽度就是可视视口（visual viewport）的宽度，而能够显示的980像素的宽度就是布局视口（layout viewport）的宽度。
为了让用户能够看清晰设备中的内容，因此我们并不让浏览器按照默认的viewport进行展示。此时就需要进行设置，要尽量保持分辨率和媒体设备视口大小比例为1：1，从而得到最佳的显示效果。通过meta标签设置viewprot.

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,viewport-fit-cover">

width=device-width宽度等于设备宽
initial-scale=1.0首次进入网页时缩放比例。（1.0为不缩放）
user-scalable=no禁止用户缩放
viewport-fit-cover针对pihoneX、iphone11、12。为了避免顶部的刘海屏和底部的功能操作键导致的显示问题。

设置rem布局其实就是动态设置根元素html的font-size值，有两种方法通过js设置或者通过vw进行设置根元素的font-size值

• rem是一个相对单位，1rem等于根元素的font-size值
• vw/vh:把屏幕分成100份
• document.documentElement.clientWidth 获取当前视口的宽度

#通过js设置
设计稿宽为375px （iphone6）,我们为了方便计算，通常把1rem换算成100px
100px = 设备宽度375px / 3.75

var fontsize= document.documentElement.clientWidth / 3.75
document.documentElement.style.fontSize = fontsize + 'px'

#通过vw设置
设计稿宽为375px （iphone6）
1vm = 3.75px

html{
font-size : 26.6666667vw
}

不管你是通过js设置还是vw设置，都记得给body加上font-size:16px

body{
	font-size:16px;
}

设置完成后，把上一个百分比布局案例中的px单位都转换成rem，按照1rem=100px比例进行转换。

iphone6下显示

ipad下显示

通过rem布局就可以解决百分比布局中宽度不协调的问题。

1. 如果你觉得px换算成rem太麻烦，给大家介绍一种vsCode中的插件px to rem.

• 安装完成后，在设置中设置多少px转换成1rem。
  
• 设置完成后，选中你需要转换的区域，按下alt+z,所有的px会转换成rem,按照你设置的100px=1rem
  
  #代码截图
  

响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。通过媒体查询实现。

• 媒体类型：
  all 所有设备 print 打印机 screen电脑屏幕平板智能手机 speech屏幕阅读器
  and
  not 取反
  min-width 最小宽度
  max-width 最大宽度
  orientation: portrait竖屏
  orientation: landscape 横屏
• 媒体查询使用方法
  通过css

@media all and (min-width:500px) {}  屏幕最小宽度小于等于500时生效
@media all and (min-width:500px)  and (max-width:700px){}  屏幕最小宽度为500 最大宽度为700生效

通过link

<link rel="stylesheet" media="all and (min-width:500px)" href="你的css文件.css">

以上就是移动端开发常用的三种布局方式百分比布局、rem布局、响应式布局~