CSS3中媒体查询的最佳做法是什么？

Question

我在寻找答案，关于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) ... /> 
   

---

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

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

Answer 1

1. css文件中的规则，以减少请求数（更好的性能）。

2. • 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个字符的限制。 Mods，请删除它。谢谢

Answer 2

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

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

在This website当您创建媒体查询时，您可以找到有关更好实践的信息，我认为这是最好的。 Personaly我会在我的网站中使用Exclusive类型的媒体查询。

但是另一方面，您可以按照This site recomendations。我认为他们是对的，但我更喜欢自己创建和使用流行的设备维度媒体查询。

下面的列表：

• < 480像素（这适用于年龄较大的，更小的智能电话的屏幕尺寸）
• < 768px，这是理想的较大智能手机和较小的片剂

• 768px ，适用于大型平板电脑屏幕和桌面屏幕等更大的应用。

此外，这些可太习惯，如果你有精力和时间：

• < 320像素，这是伟大的旧的小的，低分辨率的手机

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

我希望它能帮助你。