使用@media可以针对不同的屏幕尺寸设置不同的样式,实现响应式页面开发。
同样,重置浏览器大小时,会重新渲染页面。
这里做一个简单的总结,如下为参考链接:http://www.runoob.com/cssref/css3-pr-mediaquery.html
两种使用方式:
第一种:style中设置
@media mediatype(媒体类型) and|not|only (media feature) {
CSS-Code; //CSS代码块
}
媒体类型主要包括:
all 所有类型设备
screen 用于电脑、平板、手机屏幕
speech 用于阅读器发生设备
print 用于打印预览
示例:以屏幕宽度1366px区分
@media screen and (max-width:1365px){
/* 当屏幕宽度小于1366px时,适配的CSS代码块*/
}
@media screen and (min-width:1366px){
/* 当屏幕宽度大于等于1366px时,适配的CSS代码块*/
}
and/not/only的用法解析:
not:排除某些特定设备
only:指定特定的媒体类型
移动设备支持Media Queries的,会读取only的样式文件;
不支持的遇到only就会忽略这个样式文件。
分辨率由小向大写,因为CSS是从前向后加载,符合条件的情况下,后面的样式文件会覆盖掉前面的样式文件。
@media (max-width: 767px) {
// col-xs
}
@media (min-width: 768px) and (max-width: 991px) {
// col-sm
}
@media (min-width: 992px) and (max-width: 1199px) {
// col-md
}
@media (min-width: 1200px) {
// col-lg
}
第二种:在引用时设置断点
根据不同的条件,引用不同的样式文件,使之生效。
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">