利用@media screen实现网页布局的自适应
2015-11-24 14:29
288 查看
响应式web设计,CSS3 Media Queries是入门。
Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。
那么,Media Queries是如何工作的?
两种方式:
在media属性里:
screen:媒体类型里的一种,CSS2.1定义了10种媒体类型
and:被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
(min-width: 400px) :就是媒体特性,其被放置在一对圆括号中。
写法是前面加@media,其它跟link里的media属性相同。
其实基本上就是样式覆盖,判断设备,然后引用不同的样式文件覆盖。
要注意的是:由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。
only:用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。
all:所有设备,这个应该经常看到
还有其它一些:
media_type 设备类型说明
all 所有设备
aural 听觉设备
braille 点字触觉设备
handled 便携设备,如手机、平板电脑
print 打印预览图等
projection 投影设备
screen 显示器、笔记本、移动端等设备
tty 如打字机或终端等设备
tv 电视机等设备类型
embossed 盲文打印机
文章转载自:http://www.5imoban.net/jiaocheng/div+css/2014/0311/312.html
Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。
那么,Media Queries是如何工作的?
两种方式:
一. 直接在link中判断设备的尺寸,然后引用不同的css文件:
1. <!--当屏幕的宽度大于等于400px的时候,应用styleA.css--> <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
2. <!--当屏幕的宽度大于600小于800时,应用styleB.css--> <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
在media属性里:
screen:媒体类型里的一种,CSS2.1定义了10种媒体类型
and:被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
(min-width: 400px) :就是媒体特性,其被放置在一对圆括号中。
二. 直接写在style标签里:
- /* 当屏幕尺寸小于600px时,应用下面的CSS样式 */ @media screen and (max-width: 600px) { .class { background: #ccc; } }
写法是前面加@media,其它跟link里的media属性相同。
其实基本上就是样式覆盖,判断设备,然后引用不同的样式文件覆盖。
要注意的是:由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。
media query中的not only all等关键字:
not:用来排除掉某些特定的设备的,比如 @media not print(非打印设备)only:用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。
all:所有设备,这个应该经常看到
还有其它一些:
media_type 设备类型说明
all 所有设备
aural 听觉设备
braille 点字触觉设备
handled 便携设备,如手机、平板电脑
print 打印预览图等
projection 投影设备
screen 显示器、笔记本、移动端等设备
tty 如打字机或终端等设备
tv 电视机等设备类型
embossed 盲文打印机
小例子
/* 打印样式 */ @media print { color: red; }
/* 手机等小屏幕手持设备 */ @media screen and (min-width: 320px) and (max-width: 480px) { body { background: yellow; } }
/* 平板之类的宽度 1024 以下设备 */ @media only screen and (min-width: 321px) and (max-width: 1024px) { body { background: blue; } }
/* PC客户端或大屏幕设备: 1028px 至更大 */ @media only screen and (min-width: 1029px) { body { background: green; } }
/* PC客户端或大屏幕设备: 1028px 至更大 */ @media only screen and (min-width: 1029px) { body { background: green; } }
/* 竖屏 */ @media screen and (orientation:portrait) and (max-width: 720px) {对应样式}
/* 横屏 */ @media screen and (orientation:landscape){对应样式}
文章转载自:http://www.5imoban.net/jiaocheng/div+css/2014/0311/312.html
相关文章推荐
- 解决Android SDK下载和更新失败的方法
- git pull
- Oracle 分页查询的 SQL 语句
- 小世界网络
- 立即自执行函数和分组操作符
- 由九度1502引出的对二分查找的一点总结v1.0
- 注册IIS
- log4j配置
- 使用局部索引来提升 PostgreSQL 的性能
- Sublime Text(转移)
- jQuery插件实现无缝滚动特效
- 通达OA系统故障解决案例记录
- JdbcTemplate.CLASS
- 通达OA系统故障解决案例记录
- 【Quick 3.3】资源脚本加密及热更新(三)热更新模块
- openssh之 openssh.spec
- cocos2d-x开发学习笔记(一)
- Comparison method violates its general contract!
- 了解和配置 PAM
- JdbcOperations 综合