干货贴纸：教您如何建立响应迅速的网站

随着Html5，CSS3和其他网站建设技术的发展，越来越多的用户使用手机访问网站。 在如此大的环境中出现了响应式网站设计。 但是，它诞生之初似乎就拥有自己的光环，并且由于它能够同时适应多种设备的能力而迅速流行起来，并且受到许多公司和企业的青睐。 小飞在一些文章中还讨论了什么是响应式设计，响应式设计中的一些常见误解和盲点，响应式设计的趋势等。但是，许多读者报告说，尽管他们对响应式网站设计有一定的了解，但他们仍然没有 由于自己不知道如何创建自己的网站，因此小飞带大家去看看今天在响应式网站上应该做什么。 不用说，每个人都知道响应式设计的最大功能之一就是灵活性。 无论是网站布局，图片，视频还是文本信息，它都可以轻松适应不同大小的设备。 以下是围绕此功能的所有要点。 的。 来看看！
  设置关键点320-720-1024
  首先将网站的总体布局设置为响应式。 响应式网站的布局通常通过@media查询来更改。 更改布局的宽度后，我们通常将其称为断点或响应点。 由于响应式网站需要同时适应PC，Pad，手机等，因此我们可以为不同类型的设备首先设置3个关键断点。 但是我们在前面的“关于响应式设计的真正谎言—六种误解”中也谈到了它。 响应式网站适用于所有用户，而不仅仅是特定设备的用户。 不同设备的屏幕尺寸经常有进和出的关系，在设置关键断点时，我们还应该结合站点的内容，并注意站点上内容信息的有效传递。 通常，设置这三个断点就足够了。 但是小飞也看到了大神在十个断点处炫耀。 实际上，在高端响应式网站中，没有设置断点的特定规则，我们需要能够根据自己的需求（例如网站要考虑的平台）和用户的情况 组（实际需求，规模，浏览器分辨率分布等）根据站点的措施，应合理地进行设计规划和实现。
 
  建议：根据不同的设备大小一个接一个地设置断点，这个项目太耗时。 小飞教你一个诀窍，实际上，我们看了一些前端框架的源代码，您通常使用它们来了解它们的断点值并向他们学习。 但是，如果您在网站建设技术和编写代码方面完全是白人，那么用于起飞页面的自助式网站建设平台是一个不错的选择。 您不需要任何专业技术即可轻松建立网站。 您可以使用各种服务，例如网站建设或专业定制。
  优先设计手机
  在构建了网站的信息框架，准备了各种要素并确定了设计风格之后，我们最好首先根据移动终端进行设计。 这是因为手机和其他移动终端的屏幕较小，可以有效过滤掉最重要的网站。 元件。 解决了移动问题后，其他设备上的设计问题将更加简单。 首先确定手机的框架，设置断点值，或者可以为后续的更大屏幕提供参考。 此外，首先要面对PC端，然后再优化到移动端，从简化到复杂的这一过程将更加困难。 许多网站管理员认为此元素也很重要，而且在筛选元素的过程中，该元素也是必不可少的。 优柔寡断。
 
  建议：避免使用大图像。 对于移动用户，可以在触摸屏设备上很好显示的图片是最佳选择。 不要忽略网站上的详细信息，请记住将网站的导航菜单设置为智能且可扩展。 在为移动终端建立响应式网站之后，请记住在真实设备上对其进行测试，并在设计其他设备之前确认没有问题。
  展开目标单击区域（按钮或超链接）
  与PC侧通常使用的鼠标不同，用户更习惯于在触摸屏设备（例如手机）上进行手势操作，并直接用双手单击。 研究表明，成人食指的平均宽度为1.6-2.0cm，相当于45-57px。 单击时只有大约57px宽的单击区域才能满足用户的舒适度要求，因此请记住扩大行为指南按钮或超链接的单击区域，以使其更加手指友好并优化用户体验。 著名的菲茨定律还指出，使用定点设备到达目标的时间与当前设备位置和目标位置以及目标大小之间的距离有关。 简而言之，在网站上，点击区域越小，用户浏览以获得页面时花费的时间就越长，这将大大降低用户的转换率。
 
  建议：尽管小飞建议尽量扩大按钮或超链接的点击区域，最好超过57px，但这应与网站的实际情况相结合。 点击区域越大，效果越好。 我们可以测量整个屏幕的大小，并以合理的布局布置按钮或超链接的单击区域。 此外，使按钮更具特色还可以触发用户交互，从而可以提高用户的转换率，就像下图中蓝色按钮的波浪效果可以完全吸引用户的注意力一样。
  未定义

使用自适应图片或视频
  图片在网站上很重要。 在响应式网站中使用图片的核心问题是如何确保图片能够灵活地适应具有不同屏幕的设备，而不会失真或模糊。 因此，请勿使用定宽图片。 固定宽度的图片在适应不同尺寸的屏幕时通常会出现诸如显示不完整的问题。 如何使图像响应？ 我们可以为图像设置相关属性，或者使用支持响应能力的框架（例如Bootstrap，CSS Sprites等），并使用响应图像类的名称进行控制（例如class =“ img-sensitive”）。
  视频也是网站中重要的营销工具之一。 许多网站管理员越来越频繁地在网页中使用视频。 在自适应网站中使用视频比图片更复杂。 这不仅与视频的大小有关。 如果没有合理的设置，则播放按钮和视频的其他元素也会拉长或不对称。 如何根据屏幕宽度自动缩放视频？ 我们可以插入诸如FitVids（jQuery插件）之类的插件，或者使用容器嵌入代码并指定子元素的绝对位置。
 
  建议：如果服务器上有足够的空间，则网站上的图片和视频应以原始大小显示。 但是在小屏幕上，如果空间不足或图片或视频极大地影响网站的加载速度，我们将对其进行适当剪切以确保其原始效果。 此外，在网站上使用SVG矢量图形也是一个不错的选择。 与位图不同，SVG矢量图形仅改变图片的路径，而不会根据不同的屏幕分辨率影响像素，因此可以缩放和显示它们，而不会破坏任何清晰度或细节。
  专注于文字布局
  文字布局是网站的重要组成部分。 网站的可读性是重中之重，出色的文本布局有助于在网站上传达信息，并可以与用户形成良好的互动。 将网站划分为不同的级别，最重要的内容放置在站点的第一层，第二和第三层放置相关的信息，详细信息等，这些层级清晰且按优先级进行开发； 仔细选择合适的字体（衬里的Line字体易于阅读，无衬线字体非常醒目），最好不要在网站中使用三种以上不同的字体； 选择适当的字体大小以确保可以在不同的屏幕上很好地显示； 计划行高和段落间距，空格等，以保持页面外观干净优雅。
 
  建议：文字应简单易懂。 这可以通过颜色对比和易于阅读的字体来实现，但是颜色对比不能太弱（浅灰色背景上的灰色文本）或太耀眼（绿色背景上的红色文本）。 纯文本是最常用的，因为根据设备屏幕缩放时文本不太可能出现变形。 突出显示文章标题。 标题至少应比内容文本大1.6倍，并占据布局的中心位置。 有吸引力的标题允许用户单击以进入浏览器，并且可以在页面上停留更长的时间。
  专注于视觉层次
  除了文本布局之外，视觉层次结构在优化网站的整体布局以及与用户交互方面也起着重要作用。 视觉层次结构的最重要功能是，它可以帮助网站建立焦点，引导用户首先关注于何处，然后了解什么细节，或者最后浏览特定的块。 如何构建有效的视觉层次结构？ 当然，颜色是“一般”之一。 我们可以使用高对比度的颜色（例如冷和暖颜色）来产生强烈的视觉冲击力，突出显示核心内容，或者使用柔和的色调和类似的颜色进行视觉连接，具体设计完全取决于我们的目的。 希望网站实现。
 
  建议：视觉层次结构最终应服务于网站的内容，因此请勿在网站的正面放置过于花哨的导航菜单，滑动效果或不必要的Flash动画，应在必要时将其删除。 在创建有效的视觉层次结构时，极简设计趋势是可取的。 简单大方的设计有助于突出显示网站的中心内容，例如标语，行为指南按钮等。它还可以在多个不同的窗口上为用户提供一致且直观的体验，而极简主义也意味着最小的干扰，这将 为用户带来更高的转化率。 此外，类似卡片的用户界面也非常有效，因为矩形卡片（无论是图片还是文本）更易于适应不同尺寸的屏幕，响应式也更易于实现。
  响应式设计在不断发展，哪种方法可以使响应式网站变得最完美，每个人都尚未形成统一的答案。 但是，小飞总结了以上建站的建议，并结合了建站的丰富实践，希望对大家有所帮助。 起飞页面自助式网站建设平台（）提供了许多响应式网站模板，使用先进的网站建设技术，您可以轻松创建自己的网站而无需创建代码。 快来脱下页面自助服务平台，打造一个响应迅速的网站！