编写媒体查询的方式有何不同?

时间:2013-11-07 10:32:28

标签: media

我看到一些人直接在网站上编写了一个桌面代码,但其他人在怨恨所有样式后 - 直接在媒体查询中开始编码......用于桌面,平板电脑和手机。 有没有最好的做法或者是偏好?

 wrapper {
    width: 85%;
    margin: 0 auto;
    font: 90% Georgia, "Times New Roman", Times, serif;
     }
     .col1 {
    float: left;
    width: 40%;
    margin-right: 5%;
     }
    .col2 {
    float: left;
    width: 25%;
    margin-right: 5%;
      }
     .col3 {
    float: right;
    width: 25%;
     }






 @media screen and (max-width: 1280px)

    wrapper {
        width: 85%;
        margin: 0 auto;
    font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
    float: left;
    width: 40%;
    margin-right: 5%;


.
..
...


}

此外,如果我为5个不同的页面编写媒体查询,例如

 @media screen and (max-width: 1280px)


    /* Main Page */

    wrapper {
    width: 85%;
    margin: 0 auto;
    font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
    float: left;
    width: 40%;
    margin-right: 5%;



/* Gallery */
/* Contacts */

如果失败变得很大,这是使用评论的最佳方式,所以我不会迷失它吗?

1 个答案:

答案 0 :(得分:0)

@ user2852447,首先你必须知道什么是媒体查询。

响应式设计:为一个URL提供相同的HTML,并使用CSS媒体查询来确定如何在客户端呈现内容。这消除了用户代理检测的可能故障,并使用户免于重定向。

现在什么是响应式设计......? 响应式设计:响应式Web设计是一种设置,服务器始终将相同的HTML代码发送到所有设备,CSS用于使用媒体查询更改设备上页面的呈现。 我们建议用于智能手机的CSS媒体查询是:

@media only screen和(max-width:640px){...} //它将根据此媒体查询中的CSS定义呈现屏幕视图。 因此,我们可以使用CSS Media Query来实现针对不同设备的响应式设计。 CSSMEDIA QUERY:通过使用@media规则,网站可以为屏幕,打印,手机,平板电脑等设置不同的布局。 媒体查询允许我们使用分辨率,宽高比,方向和颜色索引等属性为特定设备设置元素样式。媒体查询在CSS3中引入,使用它我们可以定位特定的屏幕尺寸。

媒体查询属性:我们可以通过组合媒体查询功能来识别设备浏览器或硬件的特征。其中一些如下。

  1. 设备宽度:设备宽度功能以设备的宽度显示区域(屏幕尺寸)为目标。在打印介质中,此功能针对纸张的宽度。
  2. 设备高度:设备高度功能针对设备的显示区域(屏幕大小)的高度。在打印介质中,此功能针对纸张的高度。
  3. 分辨率:使用分辨率的查询以屏幕分辨率为目标,以每英寸点数(DPI)或每厘米点数(DPCM)为准。
  4. 方向:方向媒体功能描述使用横向或纵向方向的设备。如果设备屏幕或纸张的高度高于或等于其宽度,则方向为纵向。当宽度大于高度时,方向是横向的。
  5. 基本上,媒体查询是一种可以使现有网站与移动设备和平板电脑兼容的工具。