根据屏幕分辨率是使用不同的CSS

html-css027

根据屏幕分辨率是使用不同的CSS,第1张

方法一、根据分辨率使用不同的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具有媒体响应功能，可以判断屏幕宽度，从而加载设置的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)">

响应式web设计

两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：

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

意思是当屏幕的宽度大于等于400px的时候，应用styleA.css

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

意思是当屏幕的宽度大于600小于800时，应用styleB.css

另一种方式，即是直接写在<style>标签里：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/

.class {

background: #ccc

}

}

写法是前面加@media，其它跟link里的media属性相同

其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。

要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。