移动端页面重构

54236345

一、什么是移动端项目
顾名思义，运行在移动端的项目就称为移动端项目。那什么是移动端呢，重要是指大家的一些手持装备，最具有代表性的就是大家一样平常利用的手机宁静板，固然还包罗一些其他便携装备，如智能手表，掌上游戏机，等活动装置。
二、为什么要学移动端结构
随着科技的进步，及人们一样平常生存节奏的加速，大家通常耗费在手机等移动装备上的时间比利用电脑的时间越来越多，为了顺应市场及用户的变化，越来越多的服务从PC端转向移动端，就导致移动端有着强盛的发展远景和巨大的市场，作为一个Web高级前端开辟工程师，移动端页面结构也成了大家必须把握的技能之一。而且，移动互联网的大期间已经到来，学会移动端页面，才气高薪就业。
而在移动端项目标开辟过程中大家也会碰到各种在PC项目中从未碰到的题目：如装备种类多且更新换代快，项目不能及时跟进；各个欣赏器厂商不同一，导致各种兼容题目；网络信号强弱，导致体验差别；HTML5学习本钱太高等等。
以上这些题目都必要大家前端开辟职员来给出对应的办理方案，也就要求大家同时必要具有移动端页面开辟的本领。
三、移动端Web结构课程、重要突出以下几点：
1．什么是viewport
简朴来讲，viewport就是欣赏器上，用来表现网页的那一部门地区了。
但是，欣赏器也就是viewport的现实宽度，是和大家手机的宽度不一样的，无论你的手机宽度是320px，照旧640px，在手机欣赏器内部的宽度，始终会是欣赏器自己的viewport的宽度。
现在的欣赏器，都会给本身的自己提供一个viewport的默认值，现在，新版本的手机欣赏器，绝大部门是以980px作为默认的viewport值的。我这里对新版本的差别平台下的欣赏器做了测试发现，iphone下的默认viewport为980px，安卓下的欣赏器，现在主流的最新欣赏器（好比chrome，另有许多国产的像qq，uc）的viewport也是980px了。

viewport的默认值，一样平常来说是大于手机屏幕的。如许在大家的手机欣赏器中，就会出现横向滚动条，大家知道在页面结构中除了少少一些网页是特别的横向结构，其他正常环境下，出现横向滚动条黑白常致命的举动。以是，一样平常的，大家会专门给欣赏器计划一个移动端的页面。再通过对viewport的简朴设置，使viewport与装备尺寸相称或有一个相互关系，从而使大家的页面有一个更好的体验。

大家可以通过页面的meta标签举行设置，设置语句如下：

参数表明：
width = device-width：宽度即是当前装备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：答应用户缩放到的最小比例（默认设置为1.0）
maximum-scale：答应用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，由于大家不盼望用户放大缩小页面）
2．移动端尺寸和PC端有什么差别
在移动端页面结构中，大家除了必要相识viewport的概念，还必要相识一些移动端装备特有的属性，固然并不是这些属性在PC端不存在，而是在PC端这些属性对大家的页面不会产生影响：
分辨率：表现屏幕程度方向和垂直方向的像素点数
PPI: 表现屏幕的像素密度，也就是屏幕上每英寸表现的像素点的数目
DPR: 表现装备物理像素和逻辑像素的对应关系
物理像素与逻辑像素
大家刚才在讲了viewport之后，应该会有同砚有疑问，说大家的手机买返来或许是1920x1080的大概其他更高的，比我之前我说的谁人viewport默认的980px要大。
如许的题目，也就是我之前所说的物理像素与逻辑像素的关系了（即DPR）。以1920x1080为例，1080为物理像素，而大家在viewport中获取到的，是逻辑像素。以是之前viewport的默认值，所比对的巨细，实在是逻辑像素的巨细，而非物理像素的巨细。
以iphone6为例，在不做任何缩放的条件下，iphone6的获取到的viewport宽度为375px,为屏幕的逻辑像素。而购买时大家所知的750px，则为屏幕的物理像素。
3．移动端页面常用单元
那大家在做页面的时间到底该利用多大的尺寸呢，假如大家按照640的页面去做了一版页面，那是不是还必要做一版750的页面呢，很显然是不消的，大家只必要利用移动端页面结构的单元，联合viewport来举行页面重构就可以了，那么大家先来相识一下移动端页面结构中常用的有哪些单元
在大家的移动端页面结构中，比力常用的单元有em，rem，%，vw和vh，等，这些单元都有一个共同点，他们都是一个相对单元，是可以根据页面的viewport的变革，举行及时改变。
大家简朴先容一下：em的值，根据父元素的font-size举行盘算；rem是根据跟元素的font-size举行盘算；% 根据父元素的尺寸举行盘算；vw和vh分别根据viewport的宽度和高度举行盘算，100vw或vh，即是viewport的宽度或高度。
这里大家以rem为例：
假定有一个计划稿的宽度为750px，假如大家则将整个图分成100份来看。那么，大家如今就让根部元素的font-size为75px，设置为：
html{
font-size: 75px;
}
那么，大家如今就可以比对计划稿，好比计划稿中，有一个div元素，宽度，高度都为75px，那么大家可以写成：
div{
height: 1rem;
width: 1rem;
}

或许看到这里，一些人照旧不明确怎么用rem做到适配差别的分辨率，那么大家继承，如今，大家换了一个宽度为640px的手机

那么这个时间，大家的rem单元就起到作用了。
由于大家的rem满是根据html的font-size来改变的，以是说，这个时间，大家只必要把html下的font-size改成64px。大家之前的div，由于是根据html下的font-size动态变革的，那么。此时也就酿成了宽度和高度都为64px的东西了。如许，就可以做到适配差别的屏幕分辨率了。（实在就是个等比缩放）
那么总结一下，大家的办理方案，实在就是 计划稿的宽度像素/html的font-size = 1rem的值。
固然大家必要动态的对html的font-size举行改变，就必要通过JS来举行操纵。详细操纵方法呢，会在大家的完备课程内具体先容。这里就临时不做演示
4．移动端常用的结构方式
弹性结构：顶部与底部的banner不管分辨率怎么改变，他的宽度和位置都稳定，中心每条雇用信息不管分辨率怎么变，雇用信息的图标信息都位于条目标左边，薪资都位于右边；

等比例缩放结构：利用js动态获取viewport的宽度并按照必须比例设置给html的font-size后，可以实现强盛的屏幕适配结构，（一样平常淘宝，腾讯，网易等网站都是rem结构适配），由于rem能等比例适配全部屏幕，根据html的字体巨细来控制rem的巨细。

泉源：千锋HTML5

AASispcp

不知道实力运用这个方法会怎么样

BKrJSNCZ

支持楼主  来学习一下

460090140

6666 不错好文章

guidy

谢谢楼主分享

jaivy

66666666666666

鬼影士

厉害学习到了

hnwl

写的不错 谢谢分享

a54stinger

看看学习下 支持个

explorers

谢谢老板的帖子