响应式网站

响应式网站规划关于处理多类型屏幕疑问来说是个不错计划，但从打印的视点来看，其却存在着许多的艰难。没有固定的页面尺度、没有毫米或英寸，没有任何物理约束，让人感到无从下手。跟着树立网站可用的各种小工具不断增加，像素规划局限于桌面和移动端也已经成为前史。因而，如今就让咱们来阐明一下怎么运用响应式网站规划的各项基本原则来完成，而不是抗拒流通的页面体会。为了简略起见，咱们将着重讲规划。

　　内容流

　　跟着屏幕尺度越来越小，内容所占的笔直空间也不断增加，也即是说，内容会向下方延伸，这就叫做内容流。假如你习惯了运用像素和点进行规划，也许会觉得这个有点难把握。不过没关系，习惯了就极好了解了。

　　相对单位

　　你的规划目标也许是台式桌面，也也许是移动端屏幕或许介于两者之间的恣意屏幕类型。像素密度也会互相不一样，所以咱们需求运用灵敏可变，而且能够习惯各种状况的单位。那么在这种状况下，百分比等相对单位就派上用场了。运用百分比时，咱们说宽度50%即是表明宽度占屏幕巨细(或许叫视区，也即是指所翻开浏览器窗口的巨细)的一半。

　　断点

　　断点能够让页面规划在预设的点进行变形，也即是说，在台式桌面上显现3栏，在移动设备上仅显现1栏。大多数CSS特点都能够完成断点之间的变形。断点放置的方位一般取决于内容。比方，假如一句话要换行，你也许就需求加上断点。但断点运用时需求慎重——假如搞不清内容之间的逻辑关系，很简单弄的一团乱。

　　最大和最小值

　　有时候内容占满全部屏幕宽度(例如在移动设备上)是功德，但假如相同的内容在电视屏幕上也撑得满满的，貌似就不太合理了。这即是为何要有最大/最小值。例如，假如宽度为100%，最大宽度1000px，那么内容就会以不超过1000px的宽度填充屏幕。

　　嵌套目标

　　还记得相对方位吗?假如一大堆要素互相都紧密联系，那么必将难以操控。因而，将要素放置到容器中就会让它们变得更加好了解，而且简练明快。这种状况就需求用到像素之类的静态单位了。静态单位关于logo和按钮等不需求拓展的内容来说非常有用。

　　移动优先仍是台式桌面优先

　　严格来说，项目从小屏幕下手过渡到大屏幕(移动优先)，仍是从大屏幕下手过渡到小屏幕(台式桌面优先)差异不大。但是，从移动端着手能够给你带来一些额定的约束，帮助你进行决议计划。一般状况下大家会从两方面一起着手，所以你仍是要看哪种方法最适合你。

响应式网站是“响应”访问者正在使用的平台。最常见的是屏幕或浏览器大小。例如，如果浏览器宽度小于一定大小，则该网站可以编程为在一列中显示所有内容 - 有效地创建了移动优化的网站。

当Google开始考虑到2015年4月21日网站是否针对移动搜索进行移动设备优化时，许多网站所有者自然开始考虑使自己的网站响应。

如果您在大多数情况下正在委托一个新网站，那么您的开发人员将使网站具有反应性，除非有充分的理由不要因为访问台式计算机上的网站现在只能代表部分潜在流量。

无论您是否拥有在响应需求之前构建的旧站点，或者您正在构建新站点的过程是一样的（尽管后者比前者更节省时间）。

当您查看网页时，您实际上会将两种不同的内容整合在一起：内容和风格。内容是HTML（超文本标记语言），风格是CSS（级联样式表）。

在响应式网站中，内容实际上并没有改变（有时会显示/隐藏小部分，但不需要陷入困境）。

然而，CSS的一部分可以被设置为仅在满足某些规则时才能启动; 浏览器或屏幕大小在介绍中提到。有许多类型的规则，如高度，方位和像素密度（用于视网膜显示）。

使站点响应的核心是遍历每个页面，并创建规则和样式，以便站点在特定条件下进行格式化。通常这是基于任意的移动，平板电脑和桌面平台。

除此之外，由于空间有限，导航更改为使用较少页面的格式。例如，导航项目可以转换为下拉菜单，菜单可以隐藏在屏幕之外，并通过按钮显示/隐藏。

最后，图像需要优化，因为浪费带宽，以在移动设备上显示巨大的桌面图像。相反，移动图像将在大型桌面显示器上看起来像素化。

所有这些都不是特别困难，但是它们在大型网站上可能是耗时的。此外，测试过程更长，因为您需要尝试在多个设备上的所有内容。

在较小的屏幕上，将事物堆放到单个列中是移动，并且通常，只要内容保持在适当的宽度内，进一步考虑到页面的高度。结果，长沙网站建设注意到，在我自己的设计和许多在野外，移动页长度往往是相当长的。这个帖子是一个建议，至少保持浏览器视口的高度，因为您正在设计响应式网站。

做响应网站的摘录在移动设备上必须要高吗？

但是如果你把它拉到你的手机上，你可能会注意到需要相当多的滚动才能浏览整个页面。在我的Macbook上，页面大约是4500像素高，大约是浏览器窗口可视高度的6倍。相比之下，在我的手机上，页面大约是6,200像素高，或大约是可视高度的10倍。这不是内在的坏; 没有设计法规定您必须使网站在不同尺寸的设备上保持高度，但我认为深入了解这是一个有趣的观察。

所以有什么问题？

再次，我不认为整个页面长度本身是有问题的。我已经注意到，在许多响应式设计中，有意义的内容分组容易在较大的屏幕上发现，但是当事情开始在移动屏幕上叠加时，会变得混乱。例如，在Nexus页面上，第二部分将三个硬件功能组合在一起。在一个足够大的屏幕上，您可以看到这三个方块并排，并且该部分通常最终完全是浏览器可视区域的高度。在手机上，你最终只能看到一个块的一个块。当您滚动浏览页面时，这3件事情并不是明确的，而是将它们分组在一起，而不是世界的尽头，但也不是最佳的。

有办法吗

最近，我一直使用设备视口的高度作为粗略的指南，以帮助确定如何布局内容。目的是为了解决上述问题，可以在任何设备上同时合理地查看旨在分组在一起的内容。在Nexus示例中，替代原始设计可能看起来像这样。

通过大幅度缩小部分标题和缩略图的大小，我们可以将该部分的所有相同内容适用于单个视口。这种变化本身可能只是一个小的增量改进，但总的来说，我发现遵循这个一般准则导致在滚动浏览移动设备页面时更容易遵循的布局。

退步一点...

没有什么特别的设计，我刚刚向你展示。只有许多可能的布局才能实现相同的目标 - 将特定部分中的内容更清晰地分组在一起。如果您决定使用视口高度作为移动布局的指南，那么您应该探索所有不同的方式来定位内容。根据您的设计背景和内容的性质，不同的布局可能会更好。

几乎每个业务都需要一个网站，但是这些天，网络并不只是你在电脑屏幕上看到的。人们使用的设备日益多样化的互联网，从智能手机到游戏机。 

麻烦的是，大多数商业网站还在设计时只考虑到台式机或笔记本电脑。当您在移动设备的浏览器上查看典型的商业网站时，通常需要捏合，缩放和滚动才能看到页面上的内容。通过触摸屏与网站进行互动最多可能是笨拙的。

为了进行补偿，越来越多的企业正在部署的一个或多个移动 -优化网络设计，或“主题”，即在检测到移动设备时，Web服务器发送给用户。这是第一步，但移动设备有许多尺寸和形状。看起来不错，说，iPhone可能看起来和表现不佳的Kindle Fire。

可以为每个主要屏幕尺寸和设备类型创建设计，但最终这是一个失败的游戏。新的设备类型将超过设计师脱离自定义主题的能力。

一个解决方案是一种叫“ 响应网页设计 ”，它可以使你的网站更容易，更便宜的进行管理，同时给移动用户带来更好的体验。这使您可以创建一个设计，将适合几乎任何屏幕和设备类型，而且还可以提高你的搜索能见度。此外，它避免了期望用户键入“m”的障碍。在您的网站网址之前访问适合移动设备的版本。

当用户访问响应性设计的网站时，站点感测该用户的设备的约束，并自动“响应”或重新配置其自身以相当好地显示和运行。它重新组织布局，例如，换出图像和导航功能。

随着新的基于Web的设备类型成为流行，如Android相机，你只需要调整你的回应的设计，以适应他们。

要为您的业务创建响应式网站，您可以雇用设计师或使用支持响应式网页设计的网站构建工具。无论哪种方式，这五个提示可以帮助您切换到响应式设计。

1.决定何时进行更改。

响应式设计是一种完全不同的管理网站元素的方式，这意味着很难向现有的传统网站引入响应式设计。您可能需要等到创建新网站或重建现有网站。

2.跟踪移动流量模式。

检查您的网站统计信息，了解移动访问者的数量，绘制您的在线市场的这一部分的增长情况，并预测未来两到五年。增长曲线越陡，越快实施响应式网页设计就越重要。

3.在各种设备上查看竞争对手的网站。

保留与您的商家类似的商家的网址列表。定期在各种计算机，智能手机和平板电脑上检查它们。哪些是最容易导航和使用，需要最少的捏，缩放和滚动？使用最好的作为您的设计师的指导。

4.雇用具有自适应设计经验的网页设计师。

许多为中小型企业客户服务的设计师仍然专注于设计用于在计算机上查看的网站。一定要问最近设计师的响应设计网站的例子。不要只是获取屏幕截图 - 请求的URL，并检查这些网站的各种设备类型，注意他们的外观和他们的功能如何。

5.如果你自己做，使用有效，可负担的工具。

如果你决定创建一个响应设计的网站上你自己的，考虑尝试的最新版本Squarespace。这是一个廉价的网络托管服务，让您通过拖放界面创建一个响应网站。

许多小型企业网站的建立是为了外观华丽全尺寸的电脑显示器上。但是，随着越来越多的人访问网络上的移动设备，它不再是一个尺寸适合所有人。

其中一个更有效的方法来满足所有用户以及是建立-或重新设计-使用你的网站响应网页设计。这包括创建支持用户操作的内容，而不考虑他们拥有的设备类型。

自适应网页设计意味着您的网站会自动重新配置自身或“响应”，以适应访问者正在使用的设备的大小和类型。这一切都在于提高用户体验，特别是使人们能够轻松地在移动设备上做出或找到他们想要的。这意味着页面需要快速加载，网站设计应该尽量减少调整大小，打字，滚动和平移的需要。

在为适合移动设备的网站开发内容时需要了解哪些内容？牢记这五个关键要素：

1.首先考虑智能手机用户。

要创建一个引人注目且具有响应性的网站，首先需要关注智能手机用户。开始为小型触摸屏设计，并从那里向上扩展。这可以帮助确保您的网站满足任何设备上的用户，并在任何类型的互联网连接上快速加载。

2.考虑支持行动。

询问用户最希望找到的信息以及他们最希望在您的网站上做什么：

看看你是否提供他们想要的产品或服务？这意味着您应该提供一个突出的产品搜索框或服务列表的链接。

要找到您的位置？请务必添加您的地址和地图。

预约或预约？要注册您的特别优惠的电子邮件或文本提醒？小部件或链接可以将人们连接到这些服务。

打电话给你？这些是手机，毕竟。

是的，您仍然可以在网站设计的最小版本上包括有吸引力的图片和颜色 - 只要他们快速加载，在小屏幕上显示清晰，最重要的是，不要干扰用户采取行动。

3.向上扩展到平板电脑。

一旦您设计出符合智能手机用户需求的吸引力，高效和实用的网站，您就可以开始决定要为平板电脑用户添加或交换哪些内容。

您可能不需要更改您的内容或布局，以适应小型平板电脑的用户，如iPad Mini或Kindle Fire。但是对于较大的平板电脑（如全尺寸iPad），您可能需要使用较大的图片或在首页中添加更多内容，例如客户推荐或活动或特别活动的公告。您还可以考虑提供视频内容 - 只是确保它使用HTML5，因为Adobe Flash视频在许多移动操作系统上不起作用。

4.扩展到计算机。

对于笔记本电脑或桌面用户，您可以提供更丰富的内容 - 可能是更多照片，简短的业务历史或对您的产品或服务的价值和优势的解释。这些信息也可以提供给智能手机用户，但是被放在“关于我们”菜单项后面，而不是显示在主页上。

5.计划分析和更新。

这是一个猜测访问者如何使用您的网站，而另一个实际上看到他们在那里做什么。确保使用网络分析工具，如谷歌Analytics（分析）在您的网站。密切注意移动流量与计算机流量的差异，并调整您包含的内容以及相应的内容。例如，如果您发现许多移动访问者正在使用您的搜索框在您的网站上查找某种内容，请考虑向您的主菜单中添加相应的项目。这满足了需要，同时减少了对触摸屏打字的需要。

理想情况下，随着时间的推移，您的网络流量的移动部分将会增长。通过关注用户操作（而不是网页浏览量），您可以更准确地跟踪您的网站如何帮助您打造业务。