移动屏幕的响应式Web布局：简介，提示和示例
现在，设计师比以前更加艰难。 我们不仅需要为固定设备设计，而且还必须为平板电脑和智能手机之类的移动设备进行设计，并且由于我们在这里谈论许多不同的屏幕尺寸和分辨率，因此这是一项艰巨的任务。 鉴于此， 响应式网页设计可能是最好的解决方案。 它不仅提供了一个简单的移动模板； 相反，您的整个网站布局都设计得足够灵活，以适合任何可能的屏幕分辨率。
使用这种可变的设计方案，存在明显的优点和缺点。 考虑以下我的示例，以了解响应式网页设计如何使向移动设备的过渡更加顺畅。
响应式设计的工作原理
当我在网页设计中使用“响应式”一词时，是指整个布局根据用户的屏幕分辨率进行响应。 想象一下这种情况：您正在一台平板电脑上阅读网站，然后出于某种原因切换到另一台设备。 现在，浏览器窗口已调整大小。 响应式网页设计布局将以方案和布局为特色，以优雅地分解并重新设计自己。 从可用性的角度来看，这是一种出色的技术。
无论浏览器或设备屏幕大小如何，响应式设计都是为了创造一种均质的体验。 我从“ A List Apart”中找到了一个完美的例子来说明我的观点，其中还包括动态图像。 宽度是使用几乎所有内部容器元素的百分比在CSS中设置的。 大型网站在不支持动态内容（例如JavaScript）的删除方面也React良好。
为什么要为手机设计？
显然，越来越多的用户正在移动，而不仅仅是移动网络浏览。 当用户在教室中在线时，平板电脑的环境开始发生变化。 在现代Web标准中，移动设计无疑是必需的。 唯一的问题是选择开发方式，并适当地定位受众。
当您开始为特定的屏幕分辨率编码时，您最终会遇到太多样式表无法处理。 CSS3中的媒体查询可用于为纵向和横向视图构建iPhone专用的布局。 由于您可以预先确定像素密度，因此很容易修改用于移动设备的任何HTML模板。
但是，当您为响应式设计编写布局时，默认情况下会处理移动方面的问题。 台式机和移动用户都将获得类似的体验，您无需担心外部CSS属性。 您唯一需要执行的研究就是规划尽可能小的显示屏。 Google Analytics（分析）点击量数据可能对此非常有帮助。
您不太可能让您的网站在运行每种浏览器的每台设备上都能100％正常运行。 但是您可以根据屏幕的平均宽度来确定多数。 较旧的iPhone机型使用320×480的显示分辨率，这并非令人难以置信。 我会拍摄的最小宽度为240px，如果适合的话，甚至会更小。
删除默认缩放
如果您花了任何时间在智能手机上浏览网页，都会注意到网站是如何横向扩展以在屏幕上完全显示的。 这是为了用户的方便，因为大多数网站都没有对应的移动网站，因此完整的布局是最安全的选择。
但是，当您开始构建响应式移动设计时，自动缩放实际上会弄乱您的布局元素。 具体来说，图像和导航内容在布局中可能显得很小或太大。 您可以在文档标题中附加一个特殊的meta标记，该标记在大多数Android和iPhone设备中都可以将其重置。
这称为视口元标记 ，它在内容中设置了一些自定义变量。 Apple拥有一个文档页面，其中涉及您应研究的其他一些元标记，尽管这些标记专门针对iOS上的网站。 初始比例值很重要，因为这会将您的网站默认为完整100％缩放。
用户可缩放的最后一个值将完全删除此缩放功能，因此用户无法调整布局的大小。 这将根据整个设备宽度将设计锁定为一种尺寸。 请注意，即使您禁用了缩放功能，在任何设备上从纵向转换为横向时，良好的响应设计仍将适用！ 但是锁定响应式设计并删除通用缩放选项是有意义的。
动态图像缩放
图像实际上是每个网站的另一个重要方面。 移动用户可能并不希望流式传输视频，但是照片则完全不同。 当涉及打破现成模型的布局时，这些也是最大的罪魁祸首。
img { max-width: 100%; }CSS的标准规则是将max-width属性应用于所有图像。 由于它们始终设置为100％，因此您永远不会注意到失真。 当用户调整其浏览器窗口的大小小于图像可以处理的范围时，它将自动重新调整为缩小的100％宽度。 问题是Internet Explorer无法理解此属性，因此您需要使用以下宽度将IE特定的样式表放在一起：100％; 。
如果您使用JavaScript或jQuery插件，则还可以使用灵活的图像。 有一些真正聪明的开发人员投入时间来构建令人难以置信的响应式图像内容。 该线程只是Stack Overflow中众多线程之一，它采用了一种奇特而便捷的方法来解决IE6 / 7错误。
我个人建议坚持使用自然CSS图像大小调整。 如果您的网站在启用了JavaScript的移动浏览器中运行，则很可能也支持CSS。 如果您真的想更深入地研究，请查看《自适应设计的图像》这24种方法文章。
感动的设计
Web开发人员可能会忘记移动用户不再使用像BlackBerry这样的键盘电话了。 如今，大多数智能手机都使用触摸屏界面，从而呈现出与鼠标和键盘设置不同的场景。
因此，您需要考虑移动元素中的替代解决方案。 当在右侧以单个菜单显示时，下拉菜单可能会更好地工作。 大多数用户能够轻按右侧的链接，而不是轻按左侧的链接，但是任一列都可减轻空间。 使用边距缩进，无需任何jQuery代码即可轻松确定链接层次结构。
增大这些导航链接的大小也是一种很好的做法。 移动用户没有台式机甚至笔记本电脑所能提供的大屏幕的奢华。 您需要不惜一切代价使文本保持较大，预先，可点击和可读的状态。 如果用户在纵向和横向视图之间切换，您甚至可能想要调整大小–浏览移动网络时经常会重复出现。
自定义CSS布局
通常，最好调整您的布局并允许您的内容自然退化。 如果您有侧边栏和内容区域，则应将它们设置为百分比或ems的宽度，所有这些都将随浏览器窗口调整大小。 如果您应用最小宽度，则最终会中断部分布局； 因此现在侧边栏内容显示在页面内容上方。
考虑到这如何影响整体设计时，开发外部样式表会容易得多。 但是，您可能会遇到屏幕分辨率太小而无法呈现布局的屏幕分辨率。 这是添加自定义CSS属性以删除页面的一部分或完全重新格式化内容的理想方案。
开启/关闭额外内容
大型内容块的示例包括Web表单，动态菜单，图像滑块和其他类似的想法。 除了在布局变小时不完全删除这些元素之外，为什么不直接将它们隐藏在“最小化”的内容div中？ 您可以使用CSS或JavaScript进行编辑，但是最终您可能需要一些JS代码才能创建切换按钮。
此替代方法非常适合使您的主页保持动态并充满丰富的Web媒体。 您可以将其隐藏在内容div中，而不必完全删除下拉导航或重新排列页面结构。 如果用户想显示您的链接，则点击切换按钮以打开/关闭菜单。
这种格式简单，直观，并且易于在触摸屏设备上使用。 在div内，您可以将每个下拉菜单以列格式并排放置。 当窗口调整大小时，它们自然会降到彼此下方并增加页面高度。 然而，只需单击一下鼠标，即可轻松实现折叠整个菜单的选项。 此切换div与动态照片调整大小配合使用也非常适合图像滑块。
使用媒体查询
如果移动屏幕破坏了您的2列或3列布局，您将最终将每个内容区域堆叠在一起。 如果没有明显的遮挡区域，整个场地似乎会流血，并且可能变得非常混乱。 一个更好的主意是使用外部样式表（例如mobile.css）在每列上添加底部边框（仅适用于移动设备）。
使用这些新样式，您的内容可以分为多个部分。 上面的media属性是专门设计用于以横向视图定位较旧的iPhone设备的。 但它也适用于屏幕小于480像素的设备。 利用此优势，您可以确定布局在什么时候“破裂”。
您还可以使用其他一些选项来检测设备方向。 这个关于CSS媒体的出色指南可以为您提供一些想法。 另外，新的移动项目320及更高版本为移动CSS @media样式提供了样板。 这些可以直接包含在同一个mobile.css文件中，并且可以将规则应用于许多不同的设备。
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}有用的工具
- 骨架–响应式移动设计的美丽样板
- 从自适应到完全响应
展示：精美的响应式设计
我希望这些技巧和设计技巧能鼓励您朝着建立激动人心的响应式布局迈进，不仅针对移动屏幕，而且适用于任何具有Web浏览功能的常见设备。 为了使创意源源不断，我整理了一个小型的响应式移动网页设计展示。 确保检查出一些更独特的功能，并在讨论区中分享您对设计或主题的想法。
敬请关注！
在明天的帖子中，我们将展示一些免费的响应式WordPress主题，您可以下载这些主题以供使用。 一定要收看。
翻译自: https://www.hongkiat.com/blog/responsive-for-mobile-screens/