一篇真正教会你开发移动端页面的文章(一)

一篇真正教会你开发移动端页面的文章(一)

2017-12-07 10:42 来源:西安北大青鸟华美校区 手机 /PC /程序设计

原标题:一篇真正教会你开发移动端页面的文章(一)

从我工作以来,开发的一直都是移动端的页面,只有偶尔去开发几个PC端的页面,现在是一个移动端的时代,移动先行已经深入骨髓,作为一个web前端开发,如果你还在为如何开发移动端页面而迷茫,或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候,那你应该看看这篇文章了。希望这能给你帮助,同时也能给我帮助,有不合理的地方,欢迎评论支持,必将改正。

这里是基础,你了解否?

一、像素 - 什么是像素

像素是web页面布局的基础,那么到底什么才是一个像素呢?

像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念,实际上,在web前端开发领域,像素有以下两层含义:

设备像素:设备屏幕的物理像素,对于任何设备来讲物理像素的数量是固定的。

CSS像素:这是一个抽象的像素概念,它是为web开发者创造的。

如下图,是在缩放比例为1,即scale = 1的情况下,设备像素和CSS像素示意图

一篇真正教会你开发移动端页面的文章(一)

设备像素和CSS像素

现在你已经了解了,原来像素对于web前端开发来讲有这样的两层含义,那么你有没有再深入的考虑这样一个问题,当我给一个元素设置了 width: 200px; 这条样式的时候,到底放生了什么事情?

你可能会说:“废话!元素的宽度是200px呗。”;对,并没有什么问题,但是这个200px指的是什么呢?因为我们知道,对于web前端来讲像素有两层含义,那么到底是设备像素还是CSS像素?实际上我们控制的是CSS像素,因为前面提到了,CSS像素是给我们web前端开发者创造的抽象概念。所以你要记住:当你给元素设置了 width: 200px 时,这个元素的宽度跨越了200个CSS像素。但是它并不一定跨越200个设备像素,至于会跨越多少个设备像素,就取决于手机屏幕的特性和用户的缩放了,举个栗子:

苹果手机的视网膜屏幕,是一个高密度屏幕,它的像素密度是普通屏幕的2倍,所以当我们设置 width: 200px; 时,200个CSS像素跨越了400个设备像素,如下图:

一篇真正教会你开发移动端页面的文章(一)

苹果视网膜屏幕的设备像素与CSS像素的关系

如果用户缩小页面,那么一个CSS像素会明显小于一个设备像素,这个时候 width: 200px; 这条样式中所设置的200个CSS像素跨越不了200个设备像素,如下图:

一篇真正教会你开发移动端页面的文章(一)

用户缩页面时设备像素与CSS像素的关系

让我们来做一个总结

web前端领域,像素分为设备像素和CSS像素

一个CSS像素的大小是可变的,比如用后缩放页面的时候,实际上就是在缩小或放大CSS像素,而设备像素无论大小还是数量都是不变的。

二、移动端的三个视口

一看标题,你是不是蒙了?三个视口?什么三个视口?先别急,让我们慢慢来讲。

你一定写过这样一条样式: width:25%; 但是你有想过给一个元素加上这样一条样式之后发生了什么吗?25%是基于谁的25%?明白的同学可能知道了:一个块元素默认的宽度是其父元素的100%,是基于起父元素的,所以25%指的是父元素宽度的25%,所以,body元素的默认宽度是html元素宽度的100%,那么你有没有想过html元素的宽度是基于谁的呢?这个时候,就要引出一个概念:初始包含块和视口了

记住一句话:视口是html的父元素,所以我们称视口为初始包含块。 这样你就明白了,html元素的百分比是基于视口的。

第一个视口:布局视口

首先你需要了解一个原因:浏览器厂商是希望满足用户的要求的,即在手机也能浏览为PC端设计的网站,所以浏览器厂商必须想办法来在满足~

在PC浏览器中,视口只有一个,并且 视口的宽度 = 浏览器窗口的宽度,但是在移动端也要根据这个来设计的话,那么PC端设计的网站在移动端看起来会很丑,因为PC端的网页宽度在800 ~ 1024个CSS像素,而手机屏幕要窄的多,这个时候再PC端25%的宽度在移动端看起来会很窄。所以,布局视口的概念产生了。

布局视口:移动端CSS布局的依据视口,即CSS布局会根据布局视口来计算。

内容版权声明:SEO核心技术博客原创文章归SEO核心技术博客所有。

转载注明出处SEO核心技术博客http://www.yxhuying.com/