5

我正在寻找有关 CSS3 功能的一些问题的答案 - Media Queries：

  1. 哪种方式更好（对于浏览器由于性能）为不同的分辨率声明 css 规则？

    //this in head:
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />

//or this in css file:
@media only screen and (max-width: 1024px){
    //styles here
}

  2. max-device-width和有什么区别max-width？它只是针对移动（max-device-width）或桌面（max-width）浏览器的规则吗？

  3. 如果我为具有分辨率的平板电脑编写媒体查询规则1280x800，用户也可以使用纵向/横向模式，它应该看起来如何？max-width: 800px我应该为和max-width: 1280px或有另一种方式编写规则？

  4. 如果我写规则，我应该写这样的东西：

    <link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... />

    或者这两个：

    <link ... media="only screen and (max-device-width: 480px) ... />
<link ... media="only screen and (max-device-width: 1024px) ... />


PS 请原谅任何拼写或语法错误，英语不是我的第一语言

P.SS 在我发布这个问题之前，我花了一段时间在 stackoverflow 上搜索并没有找到关于这个问题的信息。如果我错了并且有类似的问题，我将删除我的帖子。

4

2 回答 2

5

  1. css 文件中的规则以减少请求数量（提高性能）。

    • max-width是目标显示区域的宽度

    • max-device-width是设备整个渲染区域的宽度

3. 我知道的另一种定位纵向或横向的方法是这样添加orientation：

/* portrait */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {
    /* styles here */
}

/* landscape */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) {
    /* styles here */
}

4. 要为宽度在 320 到 480 像素之间的移动设备定义样式表，您必须编写：

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css">

// 1 个等号丢失，< 6 个字符限制。模组，请删除这个。谢谢

于 2013-02-19T10:39:19.060 回答
0

我正在寻找有关响应式设计最佳实践的良好信息，我会给你一个建议。

在这个问题中，开发人员在使用 CSS 肖像条件时遇到问题，并在选择文档的输入文本时出现键盘。我不知道为什么，但它打破了肖像条件。

在这个网站中，您可以找到有关创建媒体查询时的更好做法的信息，我认为这是最好的。Personaly 我将在我的网站中使用 Exclusive 类型的媒体查询。

但另一方面，您可以遵循本网站的建议。我认为他们是对的，但我更喜欢自己创建和使用流行的设备维度媒体查询。

这是列表：

  • < 480 像素（适用于较旧、较小的智能手机屏幕尺寸）
  • < 768px，非常适合较大的智能手机和较小的平板电脑

  • 768px，适用于所有更大的屏幕，例如大平板电脑屏幕和台式机屏幕。

此外，如果您有精力和时间，也可以使用这些：

  • <320px，非常适合老式的小型低分辨率手机

  • 用于桌面宽屏的 1024px 样式表。

我希望它对你有帮助。

于 2015-12-18T17:10:01.907 回答