HTML5移动端页面布局的知识点有哪些

这篇文章主要介绍“HTML5移动端页面布局的知识点有哪些”，在日常操作中，相信很多人在HTML5移动端页面布局的知识点有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HTML5移动端页面布局的知识点有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　一、 移动设备和电脑pc端的区别

　　我们要学习移动端布局首先要了解“移动端”和“网页端”布局的不同之处在于哪里？也就是屏幕的尺寸！讲到屏幕尺寸我们就不得不提viewport，它是设备终端用来显示网页的那一块区域，而非浏览器的可视区域。它可以比浏览器可视区域大可以比可视区域小，但一般来说移动设备里的viewport都比可视区域要来的大。

　　现在的浏览都会给提供一个viewport的一个默认的值，一般以980像素居多或者是其他值。根据对不同平台下的新版本的浏览器做了些测试，通过测试，苹果手机下的默认viewport为980像素还有安卓移动手机上的浏览器，目前主流的最新浏览器的viewport也是980像素了。

　　二、 viewport的实际作用

　　因为 viewport的默认值是980像素只适用于PC端而不适用于移动端手机屏幕。因此手机端浏览器会出现横向滚动条。同时要说的是即使是基于980像素的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会控制viewport来专门给移动端的浏览器设计一个页面。

　　三、 viewport的实战设置

　　现在绝大多数的浏览器里基本都支持对viewport的一个设置。我们首先来看看viewport的一些属性，viewport一共有六个可调试设置的属性，它们分别为：

　　width属性： 设置layout viewport的宽度，为一个正整数，或字符串"width-device" （ 一般都是设置："width-device"）；

　　initial-scale属性： 设置页面的初始缩放值，为一个数字，可以带小数；

　　height属性： 设置layout viewport 的高度，这个属性对我们并不重要，很少使用（一般我们就不用）；

　　maximum-scale属性： 允许用户的最大缩放值，是一个数字，可以带小数；

　　minimum-scale属性： 允许用户的最小缩放值，是一个数字，可以带小数；

　　user-scalable属性： 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许。

　　下面是我们viewport的书写案例：（一般不用修改）

　　这样我们就可以做到对viewport进行控制了。

　　四、 移动端的设备

　　作为在移动端开发的程序员来讲，如果不了解设备的一些性能，在开发上面是非常耗时间的一件事，但同时也带来负面影响的是项目的进度。

　　下面是一部分移动端设备的分辨率参数：

　　可以看出移动端的尺寸都是各不相同的，如果要适配这些尺寸只能通过一定比例来书写。

　　五、 使用vw布局

　　移动端布局为了适应各个设备的大小，以前都是通过js配合rem做到各个设备的适应，但是使用rem需要对html的fontsize做计算，而这个计算的一个关键点是获取屏幕宽度，这里的100vw就等于屏幕宽度，这时候如果把这个计算公式放到css去做是不是会完美了，因为为了获取屏幕宽度不使用js，而用vw来解决这个问题，因为100vw = 屏幕宽度。

到此，关于“HTML5移动端页面布局的知识点有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！