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

Posted 仔行天下

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一篇真正教会你开发移动端页面的文章相关的知识,希望对你有一定的参考价值。

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


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

设备像素:设备屏幕的物理像素,对于任何设备来讲物理像素的数量是固定的。
CSS像素:这是一个抽象的像素概念,它是为web开发者创造的。

1 web前端领域,像素分为设备像素和CSS像素
2 一个CSS像素的大小是可变的,比如用后缩放页面的时候,实际上就是在缩小或放大CSS像素,而设备像素无论大小还是数量都是不变的。缩小的时候,一个css像素会变小;

一般一个css像素等于一个设备像素scale=1,苹果屏幕高密度一个css像素里大概4个物理像素。当缩小页面时,很多个css像素才对应了一个设备像素。

 

二 三个视口
一个块元素默认的宽度是其父元素的100%,body的宽度是html的100%;那html是基于谁的呢?
记住一句话:视口是html的父元素,所以我们称视口为初始包含块。 这样你就明白了,html元素的百分比是基于视口的。

好了,移动端的三个视口介绍完了,让我们总结一下:
1 在PC端,布局视口就是浏览器窗口
2 在移动端,视口被分为两个:布局视口(680-1024px,适应pc某些网站,web开发对应的css视口)、视觉视口(眼睛看到的大小)
3 移动端还有一个理想视口,它是布局视口的理想尺寸,即理想的布局视口。(注:理想视口的尺寸因设备和浏览器的不同而不同,但这对于我们来说无所谓)
4 我们的css是基于布局视口
这告诉浏览器把布局视口设为理想视口:<meta name="viewport" content="width=device-width"/>
width指的是布局视口的宽;device-width指理想视口的宽度;

 

三 设备像素比(DPR:device pixel ratio
成立前提,缩放比是1 ;
设备像素比dpr = 设备像素个数 / 理想视口css像素个数(device-width)

打开浏览器调试工具:
1 iphone5的理想视口是:320*568 device-width:320 device-height:568
2 iphone5的设备像素比是2
根据公式可知,iphone5的设备像素是:640*1136;

缩放:
公式前提是缩放比是1,css像素的大小是可以变的,缩放从技术实现的角度来讲,就是放大或者缩小css像素的过程,当你用双指放大缩小页面的时候,实际上就是放大或缩小css像素。
缩放:缩小放大的是css像素。

meta标签:
meta标签存在的目的主要是为了将布局视口宽设为理想视口的宽,语法如下:
<meta name="viewport" content="name=value"/>
其中content属性是一个字符串值,字符串是由逗号分割的 名/值 对组成,共有5个:
1 width:设置布局视口的宽
2 init-scale:设置页面的初始缩放程度
3 minimum-scale:设置页面最小缩放程度
4 maximum-scale:设置页面最大缩放程度
5 user-scalable:是否允许页面对用户进行缩放操作
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/>
意思是:让布局视口的宽度等于理想视口的宽度,页面的初始缩放比例及最大最小缩放比例是1,不允许用户对页面进行缩放

媒体查询:
媒体查询是响应式设计的基础,有三大特点:
1 检测媒体的类型,比如:screen,tv等
2 检测布局视口的特性,比如:宽 高 分辨率等
3 特性相关查询(对web开发无用)
css中使用媒体查询的语法:
@media 媒体类型 and (视口特性阀值){
//满足条件的css样式代码
}
实例:
@media all and (min-width: 321px) and (max-width: 400px){
.box{
background: red;
}
}
上面代码中,媒体类型为all,代表任何设备,并且设备的布局视口宽度大于等于321px且小于等于400px时,让拥有box类的元素背景变红。

以上是关于一篇真正教会你开发移动端页面的文章的主要内容,如果未能解决你的问题,请参考以下文章

教会你开发移动端页面的文章

移动端web开发进阶

移动端Web开发 基础知识

探究移动端开发

移动端web开发

前端页面开发浅谈:PC 端设计如何“完美”迁移到移动端?