响应式布局

响应式布局

1.概念
响应式布局：用一套代码，去适配不同的设备。既可以运行在PC端，也可以运行在移动端，从而实现响应式布局。就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。（注：比较适合小网站，个人博客，产品介绍页…）

2.CSS3 Media Query
要实现响应式布局，我们就需要知道CSS3中的Media Query（媒体查询），Media Query是制作响应式布局的工具，可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。利用媒体查询，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 。
1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 横屏
450分辨率以下： mobile 竖屏

3.Media Query基本语法

• 常见的媒体类型：
  all ： 用于所有设备
  print ：用于打印机和打印预览。
  screen ：用于电脑屏幕，平板电脑，智能手机等。
• 常见选项：
  and、not
  min-width、max-width
  orientation:portrait 横屏
  orientation:landscape 竖屏
  （注：横竖屏操作，只是针对移动端的。在PC端屏幕永远是竖屏的。）
  link
  4.Media Query用法
  @media 媒体类型 and（设备选取条件）
  示例1：当分辨率>=400px的时候，会识别大括号里面的代码
  
  
  示例2. 当分辨率<=300px的时候，容器变为蓝色，否则为红色
  
  示例3.当分辨率>=300px<=400px时，容器为蓝色，否则为红色
  
  示例4.not条件反过来 ,当分辨率<300px的时候，会识别大括号里面的代码 , 针对分辨率的
  
  示例5.

  • 只有竖屏下，才会触发大括号中的代码
    

  • 只有横屏下，才会触发大括号中的代码
    
    示例6.打印机媒体类型下，字体有下划线
    
    示例7.link的使用
    

    ---

    如何实现响应式布局呢？

1.先去适配手机端 -> 过渡到pad -> 过渡到pc (不是很推荐)
2.先去适配PC端 -> 过渡到pad -> 过渡到手机端 (推荐的)
示例：
( 正常的样式 , 针对PC端的 )
100行CSS

( 针对pad pro )
@media all and (max-width:1024px){
50行CSS
}

( 针对pad mini 和 mobile 横屏 )
@media all and (max-width:768px){
50行CSS
}

( 针对 mobile 竖屏 )
@media all and (max-width:450px){
50行CSS
}