CSS——响应式布局

一、响应式布局缘由

　　对于网站的移动端和PC端，大一点的网站都是分开开发的，PC端一套代码，移动端一套代码。
　　以访问淘宝网举例：
　　　　访问淘宝网 -> 后端检测当前设备 -> 如果是PC端 -> www.taobao.com
　　　　　　　　　　　　　　　　　　  -> 如果是移动端 -> www.taobao.com重定向 ->h5.m.taobao.com
　　一套代码适配多种布局，称为响应式布局，适合小型网站

二、响应式布局内容

　　利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。
　　常见选项：
　　　　媒体类型：
　　　　　　取值：
　　　　　　all 　　　　 　　　　 　　　　用于所有设备
　　　　　　print 　　　　　　 　　　　用于打印机和打印预览
　　　　　　screen 　　　　　　 用于电脑屏幕、平板电脑、智能手机等
　　　　　　speech 　　　　　　　　 应用于屏幕阅读器等发声设备
　　　　and(连接) not(取反)
　　　　min-width、max-width
　　　　orientation:portrait(方向：纵屏)、orientation:landscape(方向：横屏)
　　　　<link>
　　举例：

 

@media all and(min-width:400){
    #box{background:red;}
}
<link rel="stylesheet" href="base.css" media="all and(min-width:400px)"/>

 

　　常见修改样式：
　　　　display
　　　　float
　　　　width
　　注：响应式的代码要写到适配的CSS后面。