草庐IT

响应式网站设计注意事项

毕竟1米八 2023-09-22 原文

最近在公司写的页面的都是使用了响应式布局,也正是这点在设计与开发沟通上引发了许多口水,因此在设计规范上写下几点需要注意的地方,望共勉。

一、什么是响应式设计?
先科普一下,所谓的响应式网站就是网站页面随浏览设备的不同而自行响应,动态的调整布局结构、元素规格样式,将相同的内容以不同的格式呈现给不同设备的用户。效果如图下:

pc端环境下效果

平板环境下效果

移动端环境下效果

通过以上图片可以发现不同设备环境下网页的布局结构是不一样的,但内容却不变。

二、注意细节
A、尽量避免大量使用图片充当背景。在响应式网站上,不同设备下背景图片适配是开发者的一个痛点。在开发原理上,前端是按比例适配图片,那么这将出现以下三种情况:
1、第一种:按容器比例撑满。如图2-1-1:

图2-1-1

图片看起来好像没有问题,但是在小设备环境下图片会出现压缩变形的情况。如图2-1-2:

图2-1-2

2、第二种:图片宽度按容器比例撑满、高度自适应大小。如图2-2-1:


图2-2-1

图片看起来好像也没有问题,同理在小设备环境下图片底部会出现空白情况。如图2-2-2:


图2-2-2

3、第三种:把背景图片放大到适合元素容器的尺寸,图片比例不变。如图2-3-1:

图2-3-1

图片看起来好像没有问题,同理在小设备环境下超出容器的部分可能会裁掉。如图2-3-2:
图2-3-2

解决方案:
一张背景图片引发各种强迫症,骚年你还敢乱用?

1、尽量少用图片充当背景(这里指的是在响应式网站上)
2、通过调查使用裁剪这种方法比较多,设计师需要输出不同设备下的背景图片(pc 平板 移动端)。
3、可以使用背景图片,但是背景和图片需要分开,而且背景只能是纯色调或者是有规律的图片(这样前端可以重复使用背景图片。就可以避免底部出现空白的尴尬情况了)。
4、设计师输出不同设备下的图片效果(不推荐、效率低)

B、该显示的显示该隐藏的隐藏。例如导航栏,在pc端显示上导航的存在可能没什么,如图2-2。但是在移动端上查看的时候,导航还是尽量隐藏起来,需要的时候再显现。在移动端上导航可以用汉堡按钮的形式展现。如图2-3

图2-2 N年前的毕设

图2-3

C、不同设备环境下使用不同布局结构,这样能显示最友好的视觉效果。

如图3-1在pc端环境下显示左右列表布局。


图3-1

在移动端环境下显示上下列表布局,如图3-2。


图3-2

三、使用场景
并不是所有网站都适合用响应式,如果用了响应式,那么移动端的UI就不能要求太高,毕竟响应式只是适配一下排版布局,排版都是按规律顺序进行调整的。如果移动端UI和PC端相差太大,那还不如直接写2套代码性能还更好。而且,后期响应式网站维护起来也不简单。

如果是单个页面或比较少页面的网站(网站结构不复杂的,比如官网、个人博客等),建议做响应式;
反之,不建议(比如商城、社区等)。

四、总结

以上就是我对响应式设计的一些总结,在实施上需要设计狮和前端er一起探讨制定规范。

有关响应式网站设计注意事项的更多相关文章

  1. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

  2. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4,一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时,用户会更新。但是当我添加例如字段:name时,它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗?我也搜索过这个地方,找到了许多不同的解决方案,但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数,您可以在ApplicationController中使用beforefilter,因为Rails4将参数

  3. ruby-on-rails - 每次我尝试部署时,我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手,我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目,而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  4. ruby - Ping ruby 网站? - 2

    在Ruby中可以使用哪些替代方法来ping一个ip地址?标准库“ping”库的功能似乎非常有限。我对在这里滚动我自己的代码不感兴趣。有没有好的gem?我应该接受它并忍受它吗?(我在Linux上使用Ruby1.8.6编写代码) 最佳答案 net-ping值得一看。它允许TCPping(如标准ruby​​ping),但也允许UDP、HTTP和ICMPping。ICMPping需要root权限,但其他则不需要。 关于ruby-Pingruby网站?,我们在StackOverflow上找到一个类

  5. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  7. 阿里云国际版免费试用:如何注册以及注意事项 - 2

    作为新的阿里云用户,您可以50免费试用多种优惠,价值高达1,700美元(或8,500美元)。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用,您将获得价值1,700美元的优惠。但是,如果您是注册公司,您可以选择企业免费试用,提交基本信息通过企业实名注册验证,即可开始价值$8,500的免费试用!本教程介绍了如何设置您的帐户并使用您的免费试用版。​关于免费试用在我们开始此试用之前,您还必须遵守以下条款和条件才能访问您的免费试用:只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠,用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐

  8. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成? - 2

    在我做的一些网络开发中,我有多个操作开始,比如对外部API的GET请求,我希望它们同时开始,因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中,该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码,其中FirstAsyncWorker和SecondAsyncWorker是我编写的类,我在其中混合了Concurrent::Async模块,并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  9. ruby-on-rails - 设计注册确认 - 2

    我在我的项目中有一个用户和一个管理员角色。我使用Devise创建了身份验证。在我的管理员角色中,我没有任何确认。在我的用户模型中,我有以下内容:devise:database_authenticatable,:confirmable,:recoverable,:rememberable,:trackable,:validatable,:timeoutable,:registerable#Setupaccessible(orprotected)attributesforyourmodelattr_accessible:email,:username,:prename,:surname,:

  10. ruby-on-rails - 设计通过 reset_password_token 获取用户 - 2

    我正在尝试创建密码规则来设计可恢复的密码更改。我通过passwords_controller.rb做了一个父类(superclass),但我需要在应用规则之前检查用户角色,但我所拥有的只是reset_password_token。 最佳答案 假设您的模型是用户:User.with_reset_password_token(your_token_here)Source 关于ruby-on-rails-设计通过reset_password_token获取用户,我们在StackOverflow

随机推荐