移动端页面之初

移动端页面,拖拖拖……,终于拖不下去了,那就开始吧。

1>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

响应式布局

固定布局、流体布局、响应式布局

针对IE6/IE7/IE8不兼容,可以使用JS,根据用户显示器的分辨率,为其动态创建一个CSS文件

<script>
if (!window.screenX) {
    //IE6~8
    var oStyle = document.createElement("link");
    oStyle.rel = "stylesheet";
    oStyle.type = "text/css";
    if (screen.width > 1024) {
        oStyle.href = "widthScreen.css";	
    } else {
        oStyle.href = "normalScreen.css";	
    }
    document.getElementsByTagName("head")[0].appendChild(oStyle);
}
</script>

2>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

像素

web前端开发领域,像素分为

1、设备像素:设备屏幕物理像素,对任何设备而言物理像素的数量是固定的。

2:CSS像素:给web前端开发者创造的抽象概念

在scale=1(缩放比为1),设备像素=CSS像素

当一个元素设置了 width:200px ,控制的是CSS像素,而实际的设备像素,取决于手机屏幕的特性和用户的缩放。

苹果手机的视网膜屏幕,是高密度屏幕,像素密度是普通屏幕的2倍,当设置 width:200px  时,200个CSS像素跨越了400个设备像素;如果用户缩小页面,一个CSS像素会明显小于一个设备像素。

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

移动端的三个视口

当有个元素的样式是 width:25% ,原先当前元素默认宽度是父元素的100%,这儿的25%指的是父元素宽度的25%。所以,body元素的默认宽度是html元素宽度的100%,那html元素的宽度是基于。。。在这里,视口是html的父元素,称之为初始包含块,html的百分比是基于视口的

第一个视口:布局视口

浏览器厂商为满足用户需求,在手机也能浏览为PC端设计的网站,而产生了这一概念。

在PC浏览器中,视口只有一个,视口宽度 = 浏览器窗口的宽度,但若移动端也如此设计,那会很丑。因为PC端的网页宽度在800~1024个CSS像素,而手机屏幕显然要窄的多,由此布局视口概念自然产生了。

布局视口:移动端CSS布局的依据视口。在移动端,视口和浏览器窗口不关联,实际上,布局视口要比浏览器窗口大得多。我们通过JS获取布局视口的宽度和高度:

document.documentElement.clientWidth

doucment.doucumentElement.clientHeight

第二个视口:视觉视口

用户正在看到的网站区域

第三个视口:理想视口

对于iphone5来讲,理想视口是320*568。理想的布局视口,我们会设置viewport把布局视口设为理想视口:

<meta name="viewport" content="width=device-width" />

1、在PC端,布局视口就是浏览器窗口

2、在移动端,视口分为两个:布局视口、视觉视口

3、移动端还有一个理想视口,它是布局视口的理想尺寸

4、可以将布局视口的宽度设为理想视口

设备像素比(DPR)

设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)

大大大前提:缩放比为1

早先iphone的设备像素是320px,理想视口是320px,所以DPR=1

后来iphone的设备像素是320px,理想视口还是320px,所以DPR=2

缩放

CSS像素的大小是可变的。当双指缩放页面的时候,实际上是在放大或缩小CSS像素。

meta标签

meta视口标签的存在是为了让布局视口和理想视口宽度匹配,content属性是由以下5对键值对组成:

key value
width 布局视口宽度
init-scale 页面初始缩放程度
minimum-scale 页面最小缩放程度
maximum-scale 页面最大缩放程度
user-scalable 是否允许用户对页面进行缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

媒体查询

媒体查询是响应式设计的基础,作用是:

1、检测媒体类型

2、检测布局视口的特性

3、特性相关的查询

@media 媒体类型 and (视口特性阈值) {

//满足条件的CSS样式

}

继续阅读“移动端页面之初”

相信我会做出一番改变

 

我所期待的一些。。。

又是一次从头出发,正面技术,背靠产品,简直不要太酸爽的人生。身边的绿植死了一盆,希望不会死下一盆,

明年会有的改变:

1)开始记录(对本人而言,不想表达已经是常态,斯认为有一些小孤僻)

2)学习语言(一直半途而废,需要有所坚持了)

3)出行2次(错过北京、甘肃,很害怕会有陕西、江西)

4)马拉松长跑((⊙v⊙)就是这样。。。。)

我的大神:[zhangxinxu](http://www.zhangxinxu.com)