1

我看到有些人直接为台式机的网站编写代码，但其他人在厌恶所有样式后 - 直接在媒体查询中开始编写代码……用于台式机、平板电脑和手机。是否有任何最佳实践或偏好？

 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 */

如果失败变得很大，那么使用评论是否是最好的方法，这样我就不会迷失在其中？

4

1 回答 1

0

@user2852447，首先您必须了解什么是媒体查询。

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

现在什么是响应式设计……？ 响应式设计：响应式网页设计是一种设置，其中服务器始终向所有设备发送相同的 HTML 代码，并且 CSS 用于使用媒体查询更改设备上页面的呈现。我们推荐用于智能手机的 CSS 媒体查询是：

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

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

  1. 设备宽度：设备宽度特性针对设备的宽度显示区域（屏幕尺寸）。在打印媒体中，此功能针对一张纸的宽度。
  2. 设备高度：设备高度功能针对设备显示区域的高度（屏幕尺寸）。在印刷媒体中，此功能以一张纸的高度为目标。
  3. 分辨率：使用分辨率的查询以每英寸点数 (DPI) 或每厘米点数 (DPCM) 为单位的屏幕分辨率。
  4. 方向：方向媒体功能描述了使用横向或纵向的设备。如果设备屏幕或纸张的高度高于或等于其宽度，则方向为纵向。当宽度大于高度时，方向为横向。

基本上媒体查询是一种可以使现有网站与移动设备和平板电脑兼容的工具。

于 2014-06-03T05:41:38.540 回答