媒体查询

针对不同的手机设备做出不同的CSS样式
code block:

媒体类型

可以通过媒体类型对不同的设备指定不同的样式，一般我们使用screen。

1. all–用于所有的设备。
2. print–用于打印机或打印机预览
3. screen–用于电脑屏幕，平板电脑，只能手机等。

媒体的特性

判断的条件和依据。

1. width–定义输出设备中的页面可见区域的宽度。
2. heigh–定义输出设备中的页面可见区域的高度。
3. min-width–定义输出设备中的页面最小可见区域的宽度。
4. min-height–定义输出设备中的页面最小可见区域的高度。
5. max-width–定义输出设备中的页面最大可见区域的宽度。
6. max-height–定义输出设备中的页面最大可见区域的高度。
7. device-width–定义输出设备屏幕可见的宽度。
8. device-height–定义输出设备屏幕可见的高度。
9. aspect-ratio–定义输出设备中的页面可是区域的宽度和高度的比率。
10. device-aspect-ratio–定义设备中的屏幕可是宽度和高度的比率。

关键字

1.and 可以将多个媒体特性连接到一起，相当于“且”的意思。
2.not 排除某个媒体类型，相当于“非”的意思，可以省略。
3.only指定某个特定的媒体类型，可以省略。

引入的方式

1.link方法：

1

<link href="./6-1.css" media="only screen and (max-width: 320px)">

2.@media方法（写在CSS里）

1
2
3
4
5

@media only screen and (width: 360px) {
    html {
        font-size: 18px;
    }
}

基本上就这句话，符合就执行这句话。

常用的特性

1、width / height 完全等于layout viewport。
2、max-width / max-height 小于等于layout viewport。
3、min-width / min-height 大于等于layout viewport。
4、device-width / device-height 完全等于ideal viewport。
5、orientation: portrait | landscape 肖像/全景模式。
…..还有其它

window.resize

定义和用法

当调整浏览器窗口的大小时，发生 resize 事件。
resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。
当改变了那个浏览的宽度或者是高度的时候。

在做每个手机不同分辨率的时候改变手机的类型很经常用这个

手机端开发–视口

什么是视口？视口（viewport）是用来约束你网站中最顶级块元素的，即它决定了的大小。
pc视口和手机视口的区别：在于这个pc的视口受那个浏览器窗口的限制，手机的视口可以自己设置

移动端浏览器

移动端开发主要是针对IOS和Android两个操作系统平台的，除此之外还有Windows Phone。
移动端主要可以分成三大类，系统自带浏览器、应用内置浏览器、第三方浏览器
系统浏览器：指跟随移动设备操作系统一起安装的浏览器。

应用内置浏览器：通常在移动设备上都会安装一些APP例如QQ、微信、微博、淘宝等，这些APP里往往会内置一个浏览器，我们称这个浏览器为应用内置浏览器（也叫WebView），这个内置的浏览器一般功能比较简单，并且客户端开发人员可以更改这个浏览器的某些设置，在我们理实的开发里这个浏览器很重要。

第三方浏览器：指安装在手机的浏览器如FireFox、Chrome、360等等。
在IOS和Android操作系统上自带浏览器、应用内置浏览器都是基础Webkit内核的。

思考：移动端页面要达到什么效果才最合理？

viewport

我们知道移动设备屏幕普遍都是比较小的，但是大部分的网站又都是为PC设备来设计的，要想让移动设备也可以正常显示网页，移动设备不得不做一些处理，只要viewport足够大（块级元素html就会比较大），就能保证原本为PC设备设计的网页也能在移动设备上正常显示，移动设备厂商也的确是这样来处理的。

在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的viewport，同时为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸。 (这个值一般为980px)
这样的会我们网页设计的那些网页在移动端就不会错乱了。但是

在iPhone5s和部分Android中我们发现页面内容（文字、图片）被缩放了（变的非常小），而在部分安卓设备中则出现了滚动条。

layout viewport&ideal viewport

为什么呢？ 要解释上面的原因，需要进一步对移动设备的viewport进行分析，移动设备上有2个viewport，分别是layout viewport和ideal viewport。

1. layout viewport（布局视口）指的是我们可以进行网页布局区域的大小，同样是以CSS像素做为计量单位，可以通过下面方式获取 :
   code block:

   1 2 3

   // 获取layout viewport document.documentElement.clientWidth; document.documentElement.clientHeight;

通过前面介绍我们知道，如果要保证为PC设计的网页在移动设备上布局不发生错乱，移动设备会默认设置一个较大的viewport（如IOS为980px），这个viewport实际指的是layout viewport，我们也可改变这个默认值，后面将会介绍。

1. ideal viewport（理想视口）设备屏幕区域，以dp（或pt、px）做为计量单位，不同的设备具有不同大小的理想视口，其大小是不可能被改变的，通过下面方式可以获取。

   1 2 3 4 5 6 7

   // 获取ideal viewport有两种情形 // 新设备 window.screen.width; window.screen.height; // 老设备 window.screen.width / window.devicePixelRatio; window.screen.height / window.devicePixelRatio;

并不总是正确的，然而在实际开发我们一般无需获取这个值具体大小。

在理解了上述三个viewport后我们来解释为什么网页会被缩放或出现水平滚动条，其原因在于移动设备浏览器会默认设置一个layout viewport，并且这个值会大于ideal viewport，那么我们也知道ideal viewport就是屏幕区域，layout viewport是我们布局网页的区域，那么最终layout viewport最终是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢？移动设备厂商认为将网页完整显示给用户才最合理，而不该出现滚动条，所以就将layout viewport进行了缩放，使其恰好完整显示在ideal viewport（屏幕）里，其缩放比例为ideal viewport / layout viewport。

手机端开发基础

对于手机端的开发首先来理解一些概念上的一些东西。

这就是一个故事。
code block:

1.屏幕

移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。通常我们所指的屏幕尺，实际上指的是屏幕对角线的长度。

而分辨率则一般用像素来度量，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。

2.像素

物理像素指的是屏幕渲染图像的最小单位，不可人为进行改变，其值大小决定了屏幕渲染图像的品质，我们以上所讨论的都指的是物理像素。

1
2
3
4

// 获取屏幕的物理像素尺寸
window.screen.width;
window.screen.height;
// 部分移动设备下获取会有错误

CSS像素指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小。

浏览器窗口尺寸是CSS像素来度量的，部分浏览器存在兼容问题（IE低版本无此属性），但是可以忽略这些细节。

1
2
3
4

// 获取浏览器窗口尺寸
window.innerWidth;
window.innerHeight;
// 此值大小包含滚动条的大小

我们需要理解的是物理像素和CSS像素的一个关系，1个物理像素并不总是等于一个CSS像素通过调整浏览器缩放比例，所以存在3种情况。

3.长度单位

在Web开发中可以使用px（像素）、em、pt（点）、in（英寸）、cm（厘米）做为长度单位，我们最常用px（像素）做为长度单位。
我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位。

iPhone3G/S和iPhone4/S的屏幕尺寸都为3.5英寸（in）但是屏幕分辨率却分别为480320px、960480px，
由此我们可以得出英寸是一个绝对长度单位，而像素是一个相对长度单位（像素并没有固定的长度)。

4.像素的密度

DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念。

由于计算机显示设备中的最小单位不是墨汁点而是像素，所以用PPI（Pixels Per Inch）值来表示屏幕每英寸的像素数量，我们将PPI、DPI都称为像素密度，但PPI应用更广泛，DPI在Android设备比较常见。
利用 勾股定理 我们可以计算得出PPI：如IPHONE 4 (960^2+640^2)/3.5所以屏幕尺寸固定的话 PPI的值越大画面就更好，更清晰。

5.独立像素

随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态（iPhone3G/S为163，iPhone4/S为326），这时像素不再是统一的度量单位，会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。

做为用户是不会关心这些细节的，他们只是希望在不同PPI的设备上看到的图像内容差不多大小，所以这时我们需要一个新的单位，这个新的单位能够保证图像内容在不同的PPI设备看上去大小应该差不多，这就是独立像素，IOS设备上叫PT(Point)，Android设备上叫DIP(Device independent Pixel)或DP。

举例说明就是iPhone 3G（PPI为163）1dp = 1px，iPhone 4（PPI为326）1dp = 2px。

这个对应（比例）关系是操作系统确定并处理，通过window.devicePixelRatio可以获得该比例值。

6.二倍图

这个是开发的时候，为了解决在不同的设备上，因为像素的不同，小图在（iPhone3上用的图）高的PPI（在iPhone上用）是会被拉伸，就变得模糊，所以就要用一个大的图来

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment