15 第二十一章css3 响应式布 局
HTML4
一、媒体类型
all 所有媒体
screen 彩屏设备
print 用于打印机和打印预览
speech 应用于屏幕阅读器等发声设备
braille 应用于盲文触摸式(已废弃 )
embossed 用于打印的盲人印刷设备(已废弃 )
projection 用于投影设备(已废弃 )
tty 不适用像素的设备(已废弃 )
tv 电视(已废弃 )
二、关键字
and 并且
not 用来排除某种制定的媒体类型
only (限定某种设备)某种特定的媒体类型
三、媒体特性
( width:600px ) 宽
( max-width:600px ) 最大宽度 <=600
( min-width: 480px ) 最小宽度 >=480
( orientation:portrait ) 竖屏
( orientation:landscape ) 横屏
四、媒体查询
1、方式一 媒体查询: @media [not|only] mediatype [and] (media feature) {CSS-Code;}
@media screen and (min-width:400px) and (max-width:500px) {.bo
x {margin: 0 auto;}}
//值与值之间需要有空格
2、 方式二: @import url('index.css') [not|only] mediatype [and] (media feature) [and] (media feature);
需顶行写
1. @import url("css/reset.css") screen;
3、方式三:样式引入
<link rel="" type="" href="A.css" media="screen and (min-width:800px)">
<link rel="" type="" href="B.css" media="screen and (min-width:600px) and
(max-width: 800px)">
<link rel="" type="" href="C.css" media="screen and (max-width:600px)">
<link rel='stylesheet' media='all and (orientation:portrait)' href='portrait.css'>
<link rel='stylesheet' media='all and (orientation:landscape)' href='landscape.css'>
<link rel='stylesheet' type='text/css" media="print" href='print.css'
注意点
当都是min-width时,写入顺序要从小到大
image.png当都是max-width时,写入顺序要从大到小
less写法:
image.png五、viewport视口
<meta name="viewport" content="" />
视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示
width [pixel_value | devicewidth]
例如width = 640
height [pixel_value | deviceheight]
initial-scale
初始比例
minimum-scale
允许缩放的最小比例
maximum-scale
允许缩放的最大比例
user-scalable
是否允许缩放 (yes || no 或 1 | 0)
兼容
Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的标准模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge"
使用以下代码强制 IE 使用 Chrome Frame 渲染
<meta http-equiv="X-UA-Compatible" content="chrome=1">
提示 IE 用户安装 Google Frame
最佳的兼容模式方案,结合考虑以上两种:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">