响应式开发 使用media queries模块

Posted 2020-11-06 寻觅beyond

关于media queries的简单使用，可以参考：

具体的格式是

@media screen only (condition)  not (condition) and (condition) ,printer and (condition){
 #样式 
}

　　

　可以将一个样式应用到不同的设备中，not、and这些条件可以有多个

 

在代码中引入响应式的css，用三种方式

1、直接在index.html中的head中的style标签内写media queries，根据不同的参数设置不同的样式；或者说在将style标签中的代码都整理到一个css文件中。

　　优点：完整

　　缺点：所有代码都写在一起，比较混乱，修改不方便。

 

2、使用link引入，格式如下

<link rel="stylesheet" type="text/css" media="screen and (min-width:1000px)" href="computer.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width:900px) and (min-width:600px)" href="pad.css" />

　　

3、使用import导入css，格式如下：

@import url(computer.css) screen and (min-width:1000px)
@import url(pad.css) screen and (min-width:600px) and (max-width:999px)

　　

　　使用link和import来引入的css文件中，不用再写@media，直接写样式即可。

注意：

　　1、有多个设备css，在引入css的时候，一定要注意link和或者import的顺序，即引入css的顺序。最好按照屏幕从大到小的顺序加载css。

　　2、即使在link和import的时候，进行了判断，此处的判断是指浏览器判断应该应用哪个css文件，而不是说判断应该下载哪个css文件，css文件在页面加载的时候，所有的css文件都会下载。并不是说，当前屏幕是phone，那么就只下载computer的css。