首页 / 知识
HTML5移动端页面布局实战
2023-04-11 13:57:00
一、 移动设备和电脑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的书写案例：（一般不用修改）
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
这样我们就可以做到对viewport进行控制了。
四、 移动端的设备
作为在移动端开发的程序员来讲，如果不了解设备的一些性能，在开发上面是非常耗时间的一件事，但同时也带来负面影响的是项目的进度。
下面是一部分移动端设备的分辨率参数：
可以看出移动端的尺寸都是各不相同的，如果要适配这些尺寸只能通过一定比例来书写。
五、 使用vw布局
移动端布局为了适应各个设备的大小，以前都是通过js配合rem做到各个设备的适应，但是使用rem需要对html的fontsize做计算，而这个计算的一个关键点是获取屏幕宽度，这里的100vw就等于屏幕宽度，这时候如果把这个计算公式放到css去做是不是会完美了，因为为了获取屏幕宽度不使用js，而用vw来解决这个问题，因为100vw=屏幕宽度。
就是相对于浏览器viewport尺寸的单位，具体包括下面4个：
？vw – 视区宽度百分值
？vh – 视区高度百分值
？vmin – vw或vh，取小的那个
？vmax – vw或vh，取大的那个
vw的计算方式就是：元素宽度/设计图总宽度（VW）。
|
最新内容
相关内容
python如何安装一个模块
python如何安装一个模块，培训，工具，模块，方式，文件夹，源码，本文，下面，以上，之后，下面介绍几种安装Python模块的几种方式easy_install方式先下
python一行多条语句怎么写
python一行多条语句怎么写，培训，代码，情况，语句，括号，末尾，空格，字符串，也就是，下面，在实际的开发过程中，换行编写代码是经常遇到的情况，下面来
python写代码怎么跳下一行
python写代码怎么跳下一行，培训，代码，括号，末尾，空格，字符串，也就是，对象，以上，两个，python里一行写不下，拆成多行，有两种办法：\和()两种方法在
python网络编程及前端常见问题
python网络编程及前端常见问题，数据，服务，分析，培训，状态，前端，区别，服务器，常见问题，上面，当我们学习Python时，需要掌握的的知识有很多，除了有
python函数、类的区别
python函数、类的区别，数据，代码，培训，公用，设计，名称，变量，函数，实例，方法，python函数、类的区别：函数是组织好的，可重复使用的，用来实现单一，或
pythonpycharm与Python一样不
pythonpycharm与Python一样不，环境，项目，数据，工具，培训，设计，代码，收费，语言，功能，python和pycharm是不一样的，二者有本质的区别。Python是一
pythonphp与python一样吗
pythonphp与python一样吗，设计，网站，位置，培训，地方，地址，公开，平台，项目，概念，php和python是不一样的，两种语言有相似的地方，也有区别。PHP即
python如何用python随机产生一个一
python如何用python随机产生一个一维数组，数字，培训，步长，整数，数组，参数，函数，小数位，之间，两个，使用random模块生成随机数组python的randompython怎么求一个数的平方根
python怎么求一个数的平方根，数字，培训，代码，指数，平方根，复数，模块，个数，以上，实例，在python中求一个数的平方根可以使用math模块，或者使用内python怎么用python判断一个数是否
python怎么用python判断一个数是否是素数，代码，数字，培训，情况，质数，素数，自然数，不是，循环体，个数，先来看下什么是质数：质数(Primenumber)，又
python如何判断一个数是素数
python如何判断一个数是素数，数字，代码，培训，质数，素数，方法，个数，自然数，不是，思路，python如何判断一个数是素数的方法：一个大于1的自然数，除
python一个数的平方怎么表示
python一个数的平方怎么表示，培训，平方根，个数，函数，模块，表示，方法，表达式，实例，下面，用python进行数学计算，可以使用python内置的函数模块，下