CSS3新特性@media实现手机与电脑网页宽度自适应

发布时间:2015-08-12 11:41 | 人气数:342

为了实现手机与电脑网页宽度自适应,在css3中新增了 media query属性用于增强media type属性。因此当css3问世后,使media type可以进行条件判断输出对应的css。

@media具体语法:

@media screen and (min-width: 769px) {
    /* CSS样式定义部分 */
}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {
    /* CSS样式定义部分 */
}
@media only screen and (max-device-width: 480px) {
    /* CSS样式定义部分 */
}

一、判断不同的显示设备,跳转到不同的网页。

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://www.ecan5.com/">
二、判断媒体类型,引用不同的样式表
<link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调用的样式表文件” />
通过设定屏幕的判断条件,调用对应的css文件。该实例多用于整页面不同风格的css调用与选取,使用该方法可能需要为一个页面制作多份个css文件。

三、判断媒体横向与纵向,引用不同的样式

@media screen and (orientation:portrait){横向样式}
@media screen and (orientation:landscape){纵向样式}
四、判断媒体类型,执行不同的css样式属性
@media screen and (max-width:240px){
.box{width:200px;}
.title{color:red;}
}
Bootstrap响应式设计中几个临界点的分辨率,运用这几个分辨率,我们就可以轻松的用CSS3来写自己的自适应代码了
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200px){//>=1200的设备}
注意下顺序,如果你把@media (min-width: 768px)写在了下面那么就会出错,因为如果是1440,由于1440>768那么你的1200就会失效。

所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
@media (max-width: 1199px){//<=1199的设备}
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
重要的内容重复3次:顺序是min-width从小到大,max-width从大到小。
关键词:CSS3, Mobile,屏幕自适应