秒速赛车下载HTML5基础入门教程:移动端Web页面布
秒速赛车技巧-秒速赛车规律_官网-秒速赛车走势图
当前位置:主页 > 秒速赛车规律 > 正文

秒速赛车下载HTML5基础入门教程:移动端Web页面布

  顾名思义,运行在移动端的项目就称为移动端项目。那什么是移动端呢,主要是指我们的一些手持设备,最具有代表性的就是我们日常使用的手机和平板,当然还包括一些其他便携设备,如智能手表,掌上游戏机,等流动装置。

  随着科技的进步,及人们日常生活节奏的加快,我们通常花费在手机等移动设备上的时间比使用电脑的时间越来越多,为了适应市场及用户的转变,越来越多的服务从PC端转向移动端,就导致移动端有着强大的发展前景和巨大的市场,作为一个Web高级前端开发工程师,移动端页面布局也成了我们必须掌握的技能之一。并且,移动互联网的大时代已经到来,学会移动端页面,才能高薪就业。

  而在移动端项目的开发过程中我们也会遇到各种在PC项目中从未遇到的问题:如设备种类多且更新换代快,项目不能实时跟进;各个浏览器厂商不统一,导致各种兼容问题;网络信号强弱,导致体验不同;HTML5学习成本太高等等。

  但是,浏览器也就是viewport的实际宽度,是和我们手机的宽度不一样的,无论你的手机宽度是320px,还是640px,在手机浏览器内部的宽度,始终会是浏览器本身的viewport的宽度。

  如今的浏览器,都会给自己的本身提供一个viewport的默认值,目前,新版本的手机浏览器,绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试发现,iphone下的默认viewport为980px,安卓下的浏览器,目前主流的最新浏览器(比如chrome,还有很多国产的像qq,uc)的viewport也是980px了。

  viewport的默认值,一般来说是大于手机屏幕的。这样在我们的手机浏览器中,就会出现横向滚动条,我们知道在页面布局中除了极少一些网页是特殊的横向布局,其他正常情况下,出现横向滚动条是非常致命的行为。所以,一般的,我们会专门给浏览器设计一个移动端的页面。再通过对viewport的简单设置,使viewport与设备尺寸相等或有一个相互关系,从而使我们的页面有一个更好的体验。

  这样的问题,也就是我之前所说的物理像素与逻辑像素的关系了(即DPR)。以1920x1080为例,1080为物理像素,而我们在viewport中获取到的,是逻辑像素。所以之前viewport的默认值,所比对的大小,其实是逻辑像素的大小,而非物理像素的大小。

  那我们在做页面的时候到底该使用多大的尺寸呢,秒速赛车下载如果我们按照640的页面去做了一版页面,那是不是还需要做一版750的页面呢,很显然是不用的,我们只需要使用移动端页面布局的单位,结合viewport来进行页面重构就可以了,那么我们先来了解一下移动端页面布局中常用的有哪些单位:

  我们简单介绍一下:em的值,根据父元素的font-size进行计算;rem是根据跟元素的font-size进行计算;% 根据父元素的尺寸进行计算;vw和vh分别根据viewport的宽度和高度进行计算,100vw或vh,等于viewport的宽度或高度。

  因为我们的rem全是根据html的font-size来改变的,所以说,这个时候,我们只需要把html下的font-size改成64px。我们之前的div,因为是根据html下的font-size动态变化的,那么。此时也就变成了宽度和高度都为64px的东西了。这样,就可以做到适配不同的屏幕分辨率了。(其实就是个等比缩放)

  等比例缩放布局:使用js动态获取viewport的宽度并按照一定比例设置给html的font-size后,可以实现强大的屏幕适配布局,(一般淘宝,腾讯,网易等网站都是rem布局适配),因为rem能等比例适配所有屏幕,根据html的字体大小来控制rem的大小。

版权保护: 本文由 主页 原创,转载请保留链接: http://www.ecentiv.com//cms/673.html