|
目前，响应性网页设计已不再是一种新的测试技术，而是一种技术趋势。自2013年以来，它是使用最多的，因为越来越多的网站所有者在使用移动互联网时希望为用户提供愉快的体验，而电话、平板电脑和移动设备也在日常生活中找到自己的方式。根据Google委托在罗马尼亚、捷克共和国、斯洛伐克、匈牙利和波兰五个国家进行的“每天上网”调查的结果，67%的罗马尼亚人使用智能手机和移动电话进行连接，32%的人使用平板电脑。其他重要数据如下：61%的人在提供愉快的移动体验时对品牌有更好的评价，20%以上的Google搜索是通过移动设备进行的。移动设备上的流量占互联网上的总流量。 另一项网络分析服务Stat.Global Stats的调查结果显示，例如，在罗马尼亚，使用360x640分辨率的设备在2016年5月到2017年4月期间增加了10%。 因此，建立一个响应性网站是绝对必要的。在数字时代，最后一次与所有移动平台兼容的生成网站已经成为一种必然。 2、需要考虑的问题 首先，负责任的设计要求 根据屏幕分辨率、具有多功能尺寸的元件、柔性图像、以及站点还具有识别尺寸和为优越的导航体验选择最佳显示版本的能力，在流体盒(柔性网格)中彼此相对滑动的站点的不同组织。拥有一个响应性站点需要三个主要因素：流体网格、灵活的图像/媒体和媒体查询[3]。这些元素生活在不同思维方式的环境中。 2.1、灵活的、基于网格的布局 响应性网页设计的第一步是使用所谓的流体网格。大多数站点的宽度是固定的，并且以浏览器为中心，但是考虑到当今的大量分辨率，流体网格的优点很难被忽略。流体网格是基于百分比大小并且计算得很好。它确保布局是相互缩放的；不再以像素尺寸进行测量，而是以相对单位和百分比进行测量。这样，当站点缩放到非常低的分辨率时，其所有元素都会收缩，并且彼此完全对齐。 实现这样的站点的最好方法是进行高分辨率的设计，采取每项措施，并将元素宽度除以设计宽度。 2.2、灵活的媒体 第二种基本成分是用缩略图表示。他们可以根据需要更改宽度和高度网格的分辨率和大小。到提供快速、美观的信息可以在服务器上以以下方式保存映像三维或四维 稍后将加载正确的图像，具体取决于在屏幕的大小上。有很多能够按比例调整大小的技术图像；最常用的是最大宽度：img{最大宽度：100%；高度：自动}这样，图像的最大宽度将会是100%，如果减少得更小，图像也是如此。最好在它们将出现的最大大小现场，以避免质量损失。所以，流体图像引起大小与父块相同。如果父块小于图像大小，则图像按比例缩小。为了灵活的嵌入式视频可以应用技术。 2.3、媒体查询（@media） 它们是为不同的分辨率加载不同的CSS样式、提供最佳可能的访问体验的有效方法。媒体查询实际上是根据屏幕分辨率对CSS样式施加的条件。媒体查询是CSS3中引入的CSS技术。@media规则仅当某个条件为真时才包含CSS属性块。假设浏览器窗口小于320px，则背景颜色将变为绿色，并且菜单的div的边缘将被消除： @media纯屏幕和(max-.:320px){body{.-.:.;}.menu{margin:0px;}}使用一系列类似的查询，可以为更高的分辨率创建不同的条件：480px、600px、768px、900px、1200px。可以使用任意数量的条件。理想情况下，无论分辨率如何，站点都应该看起来完美无缺，但是考虑到其耗时的操作，最好考虑一下向目标受众推进。 三、重要步骤 让一个新网站作出响应需要采取更多的步骤，这将在下面描述。 3.1、第一步-添加视口 viewport是用于创建响应性网站的元标记，没有它，整个过程是不可能的。它指示浏览器必须按比例调整页面以适应屏幕大小。有几种方法可以应用这个视口，但是它在站点的HTML页面的<head>部分使用（最常见的）。=device-width设置页面的宽度以跟随设备的屏幕宽度，并且.-.=1设置页面首次加载时的初始缩放级别。 3.2、第二步——设置断点 接下来，通过大量对CSS的修改来扩展移动设备的页面。有必要在需要的地方设置一些断点，以便页面元素适当移动以在屏幕上良好显示。 页面元素的尺寸必须以像素为单位进行测量，以便设置断点，在断点处，随着屏幕缩小，内容开始变得糟糕。可以使用Google Chrome找到这些维度，激活“Inspect.”模式，然后跟踪出现的部分的边缘，直到页面开始看起来不怎么好。使用CSS中的媒体查询设置断点。因此，可以添加一个断点，其中设计的某些部分在断点的每一侧将具有不同的行为。例如，使用媒体查询在768px处添加断点；当屏幕小于768px时，每列应该具有100%的宽度。 类之间的差别仅仅是名称，它提供了在html中确定断点如何影响列的可能性： ·对于额外的小型设备Phones(<768px)，将考虑类前缀col-xs-*。这儿的地方很有限。因此，为了保持清晰，必须仔细考虑元素的排列。在大多数情况下，很明显导航区域的菜单会缩小为图标。菜单通过换行来适应小空间，目标组选择的选择框消失。选择框的选项被移动到菜单中的不同级别和子级别。 ·对于小型设备Tablets(≥768px)，将考虑类前缀col-sm-*。平板电脑通常比显示器小，所以页面内容必须适应新的空间要求。 ·对于中间设备桌面(≥992px和<1200px)，将考虑类前缀col-md-*。 ·对于大型设备Desktops(≥1200px)，将考虑类前缀col-lg-*。 符号“*”可以用数字代替。例如，.col-md-4创建的列大小是.col-md-1列的4倍；.col-xs-12创建的列大小是.col-xs-1的12倍，等等。 3.3、装货单 对于构建响应站点，根据现有内容，我们可以考虑两种方式： 1、首先，如果网站已经存在，那么从零开始是没有意义的。它必须重新设计。通过这种方式，我们可以使用优雅的降级，其中用于大屏幕的详细站点必须逐渐向下延伸。屏幕越小，需要省略、压缩或重新映射的页面元素就越多，以保持站点的清晰和易于使用。 2、对于一个从零开始的新网站，开始概念是移动优先，称为渐进增强。这意味着，首先为最小的屏幕创建页面，最后为大屏幕创建页面，因为页面被减少到绝对必要的程度越好，它在小终端设备上就越清晰和有用。然后，站点的这种以移动为中心的视图被逐步增强为更复杂的平板视图，并最终增强为大型桌面版本，其中所有信息、图像、动画和附加物也出现在较小的显示器上。 3.4、第三步——减少文本大小 在窄视口上，当站点显示在小屏幕上时，文本显示空间不足以正确显示格式化设置（标题站点、粗体站点、列表、表等）。另一方面，对于较大的视口，尽管早些时候文本被设置为聚焦并且不以很长的行显示，但是必须考虑访问者在步行距离之内，并且存在文本字体大小12或14不能被读取的风险。因此，要在CSS中完成的最终设置是指匹配屏幕上显示的文本的大小。 3.5、第四步——调整要素 当要手动修改站点以便做出响应时，有必要在遵循上述步骤之后进行一系列精细设置。尤其在有视觉元素的区域必须这样做（相册、视频）四周是文字或桌子。因此，调整将包括以下内容： ·围绕目标视觉元素调整形式元素； ·重新定位视频和图像； ·调整小屏幕的表格； ·扩展大屏幕的表格。这些设置包括对CSS代码进行一些添加，同时考虑视觉元素边缘的校准并将它们缩放到容器的宽度。进行这些设置取决于每个站点的复杂性。 4、响应实用程序类 在不同设备上进行响应的站点，建议使用引导响应实用程序类。有了这些，我们可以根据设备（借助媒体查询）使内容隐藏或可见。 5、结论 最近，由于以用户敏感的方式进行网站设计变得非常必要，所以重要的是要知道，对于任何事情，甚至对于网页设计，都没有通用的正确解决方案。虽然它对于用户来说是一个有吸引力的功能，但如果使用不当，则可能是一个缺点。不管有什么变化，必须考虑到网页设计是从移动设备的屏幕而不是从桌面屏幕创建站点。如果迄今为止，我们讨论的是稍后可以适应移动设备的网站，那么在2017年，平衡发生了变化：网站是直接为移动设备制作的，还要考虑如何在桌面上显示它们。通过参与用户交互，可以证明表示级别的重要性。这是最终用户在应用程序处理之后看到的：演示文稿必须取决于应用程序的复杂性。它必须是简单和直观的，即使系统很复杂，因为用户并不关心系统如何加载或者其结构有多复杂；他/她的愿望是尽可能直接和快速地导航应用程序。
| 
收藏
淘帖
踩
