不同分辨率js调用不同css问题

html-css07

不同分辨率js调用不同css问题,第1张

根据不同分辨率或不同窗口大小加载不同的css，让网页显示最合适的布局，是网站设计常用到的。

一、根据屏幕分辨率大小加载不同CSS.

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<link href="" rel="stylesheet" type="text/css" id="css" /><!--备注：这里写一个带ID="css" 的空的link样式-->

<script>

var w=window.screen.width//先获取屏幕分辨率大小

var c

if(w==1280){

c="a.css"

}else if(w==1024){

c="d.css"

}else if(w==800){

c="c.css"

}else{

c="d.css"

}

document.getElementById("css").href=c

</script>

</head>

<body>正文</body>

</html>

二、根据浏览器窗口大小加载不同CSS

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<link href="" rel="stylesheet" type="text/css" id="css" /><!--备注：这里写一个带ID="css" 的空的link样式-->

<script>

var w=document.documentElement?document.documentElement.clientWidth:document.body.clientWidth//先获取窗口宽度

var c

if(w>=1280){

c="a.css"

}else if(w>=1024){

c="d.css"

}else if(w>=800){

c="c.css"

}else{

c="d.css"

}

document.getElementById("css").href=c

</script>

</head>

<body>正文</body>

</html>

css具有媒体响应功能，可以判断屏幕宽度，从而加载设置的css

如下代码，当宽度小于1000px的时候加载css下的css-mobile.css

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

如下代码，当宽度大于1000px的时候加载css下的css-pc.css

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

一般情况下，根据分辨率加载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)">

只有一个css文件情况下，根据分辨率调整css样式，示例：

@media screen and  (max-width:620px){

.logo{width: 300pxmargin-left: -140px}

}

@media screen and  (max-width:1024px) and (min-width:621px) {

.logo{width: 220pxmargin-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%}

}