如何根据分辨率调用不同的css文件

html-css042

如何根据分辨率调用不同的css文件,第1张

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)">

方法一、根据分辨率使用不同的CSS文件

屏幕分辨率小于768像素时生效：

<link rel="stylesheet" media="screen and (max-device-width: 768px)" href="mobile.css">

屏幕分辨率大于1000时生效：

<link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="mobile.css">

方法二、在CSS中判断不同分辨率

屏幕分辨率小于768像素时生效：

@media (max-width: 768px) {

    .div1 {

        font-size: 16px

    }

}

你说的是分别引用不同的css文件吗

当宽度小于640px的时候加载css下的css-mobile.css

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

当宽度大于640px的时候加载css下的css-pc.css

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