html响应式布局

1. 响应式布局

用一套代码，去适配不同的设备。既可以运行在PC端，也可以运行在移动端。
注：比较适合小网站，个人博客，产品介绍页...

2. CSS3 媒体查询

即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。

1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 横屏
450分辨率以下： mobile 竖屏

3. 媒体查询的语法

常见的媒体类型：
    all 用于所有设备   
    print 用于打印机和打印预览。
    screen 用于电脑屏幕，平板电脑，智能手机等。
    speech 应用于屏幕阅读器等发声设备。

@media all and (min-width:500px){ }
@media all and (min-width:500px) and (max-width:800px){ }

orientation:portrait : 竖屏
orientation:landscape : 横屏
    @media all and (orientation:portrait){}
    注：这个横竖屏操作，只是针对移动端的。在PC端屏幕永远是竖屏的。

注：空格是需要添加的，要符合规范。

link的使用：
    <link rel="stylesheet" href="./hello.css" media="all and (min-width:600px)">

4. 如何实现响应式布局呢？

1. 先去适配手机端 -> 过渡到pad -> 过渡到pc (不是很推荐)
2. 先去适配PC端 -> 过渡到pad -> 过渡到手机端 (推荐的)

/* 正常的样式 , 针对PC端的 */
CSS样式

/* 针对pad pro  */
@media all and (max-width:1024px){
    CSS样式
}

/* 针对pad mini 和 mobile 横屏  */
@media all and (max-width:768px){
    CSS样式
}

/* 针对 mobile 竖屏  */
@media all and (max-width:450px){
    CSS样式
}