关于html的一些分享

CSS3响应式布局(憨憨切图仔)

一:媒体类型

all所有媒体screen彩屏设备print用于打印机和打印预览 speech应用于屏幕阅读器等发声设备braille应用于盲文触摸式（已废弃） embossed用于打印的盲人印刷设备（已废弃） projection用于投影设备（已废弃） tty不适用像素的设备（已废弃）tv电视（已废弃） 二: 关键字

and 并且 not用来排除某种制定的媒体类型 only(限定某种设备)某种特定的媒体类型 三: 媒体特性

(

width:600px

复制代码

) 宽 (

max-width:600px

复制代码

) 最大宽度 =480 (

orientation:portrait

复制代码

) 竖屏 (

orientation:landscape

复制代码

) 横屏四:媒体查询
1、方式一媒体查询：

@media [not|only] mediatype [and] (media feature){ CSS-Code; }

复制代码

1.

复制代码

//值与值之间需要有空格
2、方式二：

@import url('index.css') [not|only] mediatype [and] (media feature) [and] (media feature);

复制代码

需顶行写

1.@import url("css/reset.css") screen;

复制代码

3、方式三：样式引入
[code][/code] 1.
2.
3.
4. //嘻嘻
5. //憨憨
6.
7.
8.