Question

好的..所以这是我头脑中的代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Eddy Gann: Designer</title>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width">
<!-- main -->
<link href="main.css" rel="stylesheet" type="text/css" media="only screen and (min-width:768px)">
<!-- phone -->
<link href="phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width:640px) and (max-width:768px)">
</head>

main.css显示正常。当我调整窗口大小或查看我的iPhone时，它根本不显示任何CSS。我试过放入“main.css”，它仍然停止显示任何css，屏幕尺寸低于768px ..我不明白这个问题......

Answer 1

当屏幕尺寸低于640px

时，您尚未设置样式表

only screen and (min-width:640px) and (max-width:768px)

此声明表示媒体应为电子媒体，宽度大于640px但小于768px

看看你如何将这个文件命名为phone，我认为你希望这个用于小型设备。如果是这种情况，只需删除(min-width:640px)即可。这将设置样式表中的样式，以便在宽度低于768px时应用，其中包括iPhone

Answer 2

你可以使用百分比值例如你有640x640分辨率的屏幕;如果设置width:100%，则宽度值为640px，或者如果您的分辨率为1280x1280，则宽度值为1280px

屏幕小于768像素的媒体查询问题

2 个答案: