构建响应式网站

Question

在今天的网络开发社区中,使网站"完全响应"几乎是"标准做法" - 这意味着它可以适用于所有屏幕尺寸.

我目前有一个网站,设计宽度和高度为900*600px.但是,我想以这样一种方式改变它,即我可以使其移动响应,而不会失去其功能.

我正在寻找一些"行业标准"的概念,我可以在这个概念中适应这个目的,虽然我对于"专业人士"如何在现实世界中实现这一目标略有不足？

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

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

.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;
}

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

简而言之,这种"响应式"设计将如何构建？处理响应式设计时是否有"最佳实践"？

Answer 1

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

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

使用动态单位

使网页响应的最重要的功能之一是你使用的单位,所以我首先要提到的.目前,您通过使用(像素)px单元对这些值进行"硬编码",这将被视为"静态单位".

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

绝对长度单位相对于彼此固定并锚定到某些物理测量.它们主要在输出环境已知时有用.绝对单位由物理单位(in,cm,mm,pt,pc)和px单位~ w3.org组成

上表显示了所谓的"绝对"单位,这是因为当您在移动设备上调整浏览器或查看大小时,它们不会"技术上"发生变化.

您应该考虑使用其中一个"动态"单元,而不是使用这些单元.例如:

• 百分比(%)
• viewport-width或viewport-height(分别为vw和vh)

〜本文中的 图片说明这是一篇旧文章,自那以后对这些文章的支持有了很大改进

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

例如,在此处调整屏幕大小:

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

<div></div>

您应该注意到该div将始终是"其容器的50%".

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

使用媒体查询

如果使用得当,媒体查询很棒.

媒体查询是一个true或false的逻辑表达式.如果媒体查询的媒体类型与运行用户代理的设备的媒体类型匹配(如"适用于"行中所定义),并且媒体查询中的所有表达式都为真,则媒体查询为true.

为适用于所有媒体类型的媒体查询提供简写语法; 可以省略关键字'all'(以及尾随'和').即如果未明确给出媒体类型,则为"全部".

例如,您可以测试类似"如果我的屏幕小于500px,请使用此css".

这将使用类似的定义:

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

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

一个简单的演示就是:

div{
  width:500px;
  height:200px;
  background:gray;
  }

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

<div></div>

使用自适应插件

(个人不建议,但仍然有效)

Bootstrap是用于开发响应式Web的最流行的HTML,CSS和JS框架.

虽然我建议不要使用它,因为它有很多"不必要的"css规则,因此我认为它应该只用于'概念代码',而不是生产代码.

其他框架包括:

• 基础3
• 骨架
• 引导

使用这些的组合

实际上,大多数开发人员会使用这些组合的全部组合.没有一种确定网站响应的"权威"方式.但是,希望您将来可以使用其中一些.