max(min)-device-width和max(min)-width的区别

最新推荐文章于 2024-04-25 10:30:06 发布

spfLinux

最新推荐文章于 2024-04-25 10:30:06 发布

阅读量1.2k

点赞数

分类专栏： css 移动web 文章标签： maxmin-device-width和

css 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

移动web

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/tinyScreen.css" media="screen and (max-width:600px)">
	<link rel="stylesheet" href="css/smallScreen.css" media="screen and (min-width:600px) and (max-width:900px)">
</head>
<body>
	
</body>
</html>

tinyScreen,css:

body{
	background: red;
}

smallScreen.css:

body{
	background: green;
}

当使用min-width和max-width时，css有效果。

----------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta >
	<title>Document</title>
	<link rel="stylesheet" href="css/tinyScreen.css" media="screen and (max-device-width:600px)">
	<link rel="stylesheet" href="css/smallScreen.css" media="screen and (min-device-width:600px) and (max-device-width:900px)">
</head>
<body>
	
</body>
</html>

当使用min-device-width和max-device-width时，css无效果。

----------------------------------------------------------------

原因：

max-device-width和max-width的区别

max-device-width和max-width是有区别的，表现在如下几个方面：

1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。

2、max-width是目标显示区域的宽度，例如，浏览器宽度。

3、如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。

4、如果使用max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。

5、通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。

参考链接：

点击打开链接