响应式布局
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
}