Web移动端页面重构的方法是什么

这篇文章主要介绍“Web移动端页面重构的方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Web移动端页面重构的方法是什么”文章能帮助大家解决问题。

创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都网站制作、唐县网络推广、微信小程序、唐县网络营销、唐县企业策划、唐县品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供唐县建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

首先我们了解一些关于移动端布局的一些概念。


什么是移动端页面布局?
移动端页面布局,一个好的页面布局能够减少代码量和减少CSS3属性的重复率。所以做好布局很重要,合理安排好标签,合理给标签命名,样能提高页面的性能。


什么是Viewport?
就是浏览器,用来显示网页的那一部分区域,也就是说浏览器的实际宽度是和我们手机的宽度不一样的,无论你的手机宽度是320PX还是640PX,在手机内部的宽度,始终会是浏览器本身的Viewport。


什么是像素密度(PPI)?
屏幕上每英寸可以显示像素点的数量,单位是PPI,屏幕像素密度与屏幕尺寸以及分辨率有关,屏幕尺寸越小,分辨率越高。


什么是DPR?
设备的物理像素和逻辑像素的对应关系,即物理像素/逻辑像示,默认缩放为100%的情况下,设备像素和CSS像素的比值。


常见的移动端屏幕尺寸
3.5英寸,3.7英寸,4.2英寸,4.7英寸,5.0英寸,5.5 英寸,6.0英寸,这是我们移动端页面重构最基本的概念。


移动端页面重构常用单位


因为要适应所有的移动端屏幕尺寸,所以传统的px布局页面在移动端就不太适用。
如何实现强大的屏幕适配布局,需要知道什么是rem。


1,Rem是指相对于根元素的字体大小单位,能等比例适配所有屏幕,根据变化html也就是根元素的字体大小来控制rem的大小,
JS计算:通过获取视口的宽度/实际设计图的宽度*html的font-size


2,CSS3新增单位 VW,VH
VW:视窗宽度,1VW等于视窗宽度的百分之一
VH:视窗高度,1VW等于视窗高度的百分之一
我们也可以把VW转换成PX赋值给font-size,
元素所展示的大小(设计图固定大小)=(VW*设计稿宽度)/100
VW = 元素所展示的大小(设计图固定大小)*100/设计稿宽度
VW,VH是CSS3新增的单位,它只能有着自己的兼容性,IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Android browser4.4+支持,chrome for android39支持。


实例解析
移动端常用布局方式有100%布局,rem布局以及VW布局,首先来通过几个案例来看下各自的布局有什么优点和缺点。


1、100%布局案例
100%布局也就是我们的弹性布局,它有着自己的特点,从下图实际案例中可以看出,无论顶部与底部的bar不管分辨率怎么变,它的宽度和位置都不变; 中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息都位于条目的左边,薪资都位于右边,这就是我们的100%布局的一个好处,它能够充分发挥大手机的优势,手机越大,显示的内容就越多。
我们再仔细观察下面的案例可以发现,图越大,它的间距就越大,字体大小也在变化,比例就会失调,这是100%弹性布局的缺点。
Web移动端页面重构的方法是什么
2、rem布局
Rem布局就是等比缩放布局,从下面案例中分析可以看得出,不管是放在iphone5, iphone6, 或者iphone6Plus中,它们都是等比例缩放的,图片要大都大,要小都小,这就是rem布局页面的特点,它是我们最常用的移动端页面布局方式,当然我们也可以用css3新增的VW来布局。
Web移动端页面重构的方法是什么
Css 代码:

Web移动端页面重构的方法是什么

关于“Web移动端页面重构的方法是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


网页题目:Web移动端页面重构的方法是什么
网站路径:http://pwwzsj.com/article/pohojo.html