html - 这是设置媒体查询的有效且正确的方法吗?

标签 html css media-queries stylesheet

<link id ="style" rel="stylesheet" type="text/css" title="other" href="regularStyles.css" />
<link rel="stylesheet"  media= "all and (mid-width: 767px) and (max-width:2049px) and (min-height:767px) and (max-height: 1538px)" href="notePads.css"  />
<link rel="stylesheet" media= "all and (min width: 319px) and (max width: 1281px) and not desktop and not (width: 352px; height: 416px) " href="NormalTouchPhones.css" />

这是设置样式表 (NormalTouchPhones.css) 的有效方法吗?其宽度为 352 像素,高度为 416 像素?然后这是最小的。

media= "all and (mid widht: 175px) and (max-widht: 353px) and (min-height: 207px) and (max-height: 321px)and not desktop" href="smallNokias.css"

我的索引文件中也有这个。

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8.css" media="screen" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

我还设置了我的样式表的降序,桌面在顶部,然后是我的记事本,然后是我更大的触控手机,然后是最小的手机,如诺基亚和索尼爱立信的手机。 它会正常工作吗?感谢您的任何评论,无论是为了改进还是希望确认我已经正确地处理了这个问题:)

最佳答案

<link id ="style" rel="stylesheet" media="screen" type="text/css" title="other" href="android.css" />
<link rel="stylesheet" media= "all and (mid-width: 767px) and (max-width:2049px) and (min-height:767px) and (max-height: 1538px)" href="notePads.css"  />
<link rel="stylesheet" media= "all and (min-width: 320px) and (max-width: 1281px) and not (width: 352px; height: 416px) and not desktop, (-webkit-device-pixel-ratio: 2.0) " href="android.css" />
<link rel="stylesheet" media= "all and (max-widht: 240px) and (max-height: 320px) and not desktop" href =" smallest.css" />

现在正在解决,感谢指导:)

似乎只有一个问题,我输入了 (-webkit-device-pixel-ratio:2.0),这针对我手机上的谷歌浏览器。

这样谷歌浏览器和标准的互联网浏览器就可以在我的 Galaxy s3 上查看相同的内容。也许这样做是错误的? 是google Chrome 2.0,而safari 不是吗?没有将设备像素比设置为 2.0 的相同样式表为我的移动互联网提供了我想要的东西,但没有为移动设备提供谷歌浏览器。你在我的桌面 chrome 浏览器中没有效果。

但是 safari.. 在 macbook air 上,我的看法与在移动设备上的看法相同,我想知道为什么,有什么办法可以解决这个问题?

关于html - 这是设置媒体查询的有效且正确的方法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27972592/

相关文章:

html - 如何在网页上使用通用菜单?

html - grails 中的 DatePicker 输入字段自定义

c# - 如何发送表情符号?

css - 为什么我的响应式网页上有水平滚动条

javascript - 检测 "overflow: auto"是否正常(手机浏览器)

html - 我应该如何将图像放在侧边栏菜单下方

javascript - 如何循环遍历 javascript 中的 XML 节点?

jquery - SideNav 切换问题 Liferay

html - 样式未应用于 div 而它位于不同的 div

css - 如何在 Bootstrap 3 中垂直放置按钮