赞
踩
CSS媒体查询提供了一种应用CSS的方法 – 浏览器和设备的环境与指定规则相匹配的时候CSS被应用.
<style>
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
</style>
翻译:
<style>
@media 查询的类型 and (css生效条件){
生效时的css样式.
}
</style>
被打印时, 将body大小设定为12pt。
页面载入时,不生效。
<style>
@media print {
body {
font-size: 12pt;
}
}
</style>
pt是字体单位。pt全称为point,中文意思为“点”. 印刷行业用来表示字体的大小, 绝对长度为1/72英寸. word, wps 字体大小.
<style>
@media screen and (max-width:960px) {
body {
color: red;
}
}
@media screen and (min-width:96px) {
body {
color: blue;
}
}
</style>
orientation 朝向,有 竖放(portrait mode)和横放(landscape mode)两种模式。
标准的桌面视图是横放朝向的, 浏览器默认是横向的.
对竖放模式的手机或平板电脑上可能不太友好.
对朝向的测试建立一个为竖放设备优化的布局。
<style> /* 横放 */ @media (orientation: landscape) { body { background-color: aqua; } } /* 竖放 */ @media (orientation: portrait) { body { background-color: aquamarine; } } </style>
横放标准是 宽减高大于零
根据如下:
小于零
就是竖放
设置多个媒体查询的条件
and 连接两个条件 , 同时满足, 才可以是使用css样式
<style>
@media screen and (min-width: 400px) and (orientation: landscape) {
body {
color: blue;
}
}
</style>
, 用逗号分开,只要满足一个条件就使用css样式
<style>
@media screen and (min-width: 400px), screen and (orientation: landscape) {
body {
color: blue;
}
}
</style>
not 在@media 后加not 与后面条件相反的情况下使用css样式
<style>
@media not all and (orientation: landscape) {
body {
color: blue;
}
}
</style>
引入媒体查询的点就叫做断点。
可以从桌面或者最宽的视图开始,然后随着视口变得越来越小,加上断点,把物件挪开;你也可以从最小的视图开始,随着视口变得越来越大,增添布局内容。第二种方式被叫做移动优先的响应式设计,
第一步: 正常布局流可阅读
第二步: 媒体查询 @media screen and (min-width: 40rem) 一个宽度, 设置一个布局
第三步: 媒体查询 @media screen and (min-width: 70rem) 一个更大的宽度, 设置一个布局
网页实例
下一节: 前端之我的响应式布局实践
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。