Html 屏幕小于768px的媒体查询问题_Html_Css_Media Queries

Html 屏幕小于768px的媒体查询问题

html css

Html 屏幕小于768px的媒体查询问题,html,css,media-queries,Html,Css,Media Queries,好的。。这是我脑子里的密码 <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="widt

好的。。这是我脑子里的密码

<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”，但它仍然停止显示屏幕大小小于768px的css。。我不明白这个问题

当屏幕大小低于640px时，您尚未设置样式表

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

此声明意味着介质应为电子介质，宽度大于640px，但小于768px

看看你是如何把这个文件命名为phone的，我假设你希望它是用于小型设备的。如果是这种情况，只需删除

（最小宽度：640px）

。这将设置样式表中的样式，以便在宽度低于768px（包括iPhone）时应用。您可以使用percange值，例如，您的屏幕分辨率为640x640；如果你设置宽度：100%你的宽度值是640px，或者如果你的分辨率是1280x1280，那么宽度值是1280px

我不明白为什么我的iphone上没有显示最小宽度为640px的东西。这至少应该对iphone起作用，但事实并非如此，因为最小宽度意味着最小宽度。因此，在您的delcaration中，屏幕大小必须大于640px