一般情況下，根據(jù)分辨率加載pc端 wap端 pad端三個css文件，示例：

<link rel="stylesheet" type="text/css" href="./css/style.css" media="all"> <link rel="stylesheet" href="./css/phone.css" media="(max-width:620px)"> <link rel="stylesheet" href="./css/pad.css" media="screen and (max-width:1024px) and (min-width:621px)">
//其中 media 是媒體查詢的范圍，當最大寬度是1200，這里就是手機平板一下的尺寸 加載手機css ，反之電腦css
<link rel="stylesheet" type="text/css" href="../css/m_wuqinglan.css" media="screen and (max-width:1200px)"/> <link rel="stylesheet" type="text/css" href="../css/pc_wuqinglan.css" media="screen and (min-width:1201px)"/>

只有一個css文件情況下，根據(jù)分辨率調(diào)整css樣式，示例：

@media screen and (max-width:620px){.logo{width: 300px;margin-left: -140px;} }@media screen and (max-width:1024px) and (min-width:621px) {.logo{width: 220px;margin-left: -99px;}.nav li:nth-of-type(2),.nav li:nth-of-type(3){width: 8%;}.nav li:nth-of-type(5),.nav li:nth-of-type(6){width: 12%;} }

?

轉(zhuǎn)載于:https://www.cnblogs.com/yuan9580/p/11513013.html

總結(jié)

以上是生活随笔為你收集整理的CSS响应式：根据分辨率加载不同CSS的几个方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。