使用动态单位

Question

在今天的网络开发社区，这几乎是标准的做法＆＃39;建立一个网站＆＃34;完全响应＆＃34; - 这意味着它适用于所有屏幕尺寸。

我目前有一个网站设计宽度和高度为900 * 600px。但是，我想以这样的方式改变它，使我能够在不失去其功能的情况下使其具有移动响应性。

我一直在寻找一些行业标准＆＃39;我可以适应这个目的的概念，虽然我对于专业人士的处理方式略有不足。会在现实世界中实现这个目标吗？

+---------------------------------------+
|     NAVBAR (900px)                    |
+---------------------------------------+
|      |                                |
|      |                                |
|      |           body                 |
|200px |          (700px)               |
|      |                                |
|      |                                |
|      |                                |
|      |                                |
+---------------------------------------+

这是一个适合900 * 600px屏幕的布局设计的快速演示：

＆＃13;

.page-wrap {
  height: 600px;
  width: 900px;
  background: lightgray;
  position: absolute;
  top: 0;
  left: 0;
}
.nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 900px;
  background: tomato;
}
.sidebar {
  position: absolute;
  top: 50px;
  left: 0;
  height: 550px;
  width: 200px;
  background: dimgray;
}
.nav a {
  display: inline-block;
  height: 50px;
  width: 100px;
  line-height: 50px;
  text-decoration: none;
  background: rgba(200, 200, 200, 0.4);
}
.nav a:hover {
  background: transparent;
}

＆＃13;

<div class="page-wrap">
  <div class="nav">
    <a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a>
  </div>
  <div class="sidebar">
  </div>
</div>

＆＃13;

简而言之，这将如何做出响应＆＃39;设计是否构建？是否有最佳实践＆＃39;在处理响应式设计时？

Answer 1

有很多方法可以使网站响应。它包含了很多因素。

您需要使用RWD，它代表响应式网页设计。这意味着您可以在不同大小的屏幕上传送您的网页，而无需反复重写您的HTML。如果您必须使用移动设备和/或平板电脑设备，这是必须做的事情。

使用动态单位

使网页响应的最重要功能之一是您使用的单位，所以我首先要提到的。目前，您已经硬编码了＃39;这些值通过使用（像素）px单位，这将被视为一个静态单位＆＃39;。

以下是您在生成标记时可能需要考虑的几个单位：

绝对长度单位相对于彼此固定固定在一些物理测量上。他们主要是有用的输出环境是已知的。绝对单位包括物理单位（in，cm，mm，pt，pc）和px单位〜w3.org

enter image description here

上表显示的是绝对的＆＃39;单位，这是因为他们没有技术上的＆＃39;在移动设备上调整浏览器或查看大小时更改。

相反使用此类单位，您应该考虑使用其中一个动态＆＃39;单位。例如：

enter image description here 〜来自this article的图片注意 这是一篇旧文章，对这些文章的支持有improved a lot since

例如，使用百分比等意味着您可以根据包含块的大小设置div的宽度和/或高度。

例如，在此处调整屏幕大小：

＆＃13;

div {
  width: 50%;
  background: tomato;
  height: 50px;
}

＆＃13;

<div></div>

＆＃13;

你应该注意到div将永远是其容器的50％＆＃39;。

如果您从头开始构建您的网站，这将变得非常方便，但如果您正在调整网站也会很有用。

使用媒体查询

如果使用得当，媒体查询很棒。

媒体查询是一个true或false的逻辑表达式。一个   如果媒体查询的媒体类型与媒体类型匹配，则媒体查询为true   运行用户代理的设备的媒体类型（如定义的那样）   在＆＃34;适用于＆＃34; line），以及媒体查询中的所有表达式   真。

为适用于所有人的媒体查询提供简写语法   媒体类型;关键字'all'可以省略（与...一起）   尾随'和'）。即如果未明确给出媒体类型，则为   “所有”。

例如，您可以测试类似＆＃34;如果我的屏幕小于500px，请使用此css代替＃34;。

这将使用类似的定义：

@media (max-width:500px) {
//my css for when screen is lass than 500px wide
}

可以在媒体查询列表中组合多个媒体查询。一个以逗号分隔的媒体查询列表。如果是一个或多个媒体逗号分隔列表中的查询为true，整个列表为true，否则就是假的。在媒体查询语法中，逗号表示逻辑OR，而'and'关键字表示逻辑AND

这个的简单演示是：

＆＃13;

div{
  width:500px;
  height:200px;
  background:gray;
  }

@media screen and (max-width:500px){
  div{
    width:100px;
    background:tomato;
    }
  
  }

＆＃13;

<div></div>

＆＃13;

使用自适应插件

（个人不建议，但仍然有效）

Bootstrap是最受欢迎的HTML，CSS和JS框架开发响应式网络。

虽然我建议不要使用它，因为它有很多不必要的＆＃39; css规则因此我认为它只应用于概念代码而不是生产代码。

其他框架包括：

使用这些

的组合

实际上，大多数开发人员会使用这些组合的全部组合。真的不是一个明确的＆＃39;使网站响应的方式。但是，希望您将来可以使用其中一些。

构建响应式网站

1 个答案:

使用动态单位

使用媒体查询

使用自适应插件

使用这些