草庐IT

响应式设计

凉城十月 2023-03-28 原文

响应式设计是Ethan Marcotte在2010年5月提出的概念，这里的相应值得是网页能够在不同尺寸和类型的设备上作出不同的表现。

一个经过精心设计的响应式页面，可以在多种设备上提供舒适美观、易于交互的界面和良好的用户体验，达到“Once write run everywhere”的效果。这个概念是为了服务移动互联网而诞生的。

最初，响应式设计的概念是用于CSS3中的，通过媒体查询（Media Query）判断设备类型，进而对不同的设备设置相应的样式表。

而在实际开发中，很多开发者也会使用JS对设备类型进行补充判断，
比如使用JS可以精准判断设备是安卓还是苹果iOS系统，这是CSS3媒体查询无法做到的。
又因为可以通过JS获取文档元素并对其设置样式，所以使用JS来控制设备的视图表现也属于响应式设计。

媒体查询

媒体查询中最核心的内容就是media。
media是一个关键字，我们通过它来判断不同的设备类型，并在其代码块中预定义DOM元素的样式。
当设备属性符合一个media判定时，元素将采用其代码块中的样式。

语法
@media media_type and|not|only (exp) {
  /* CSS代码*/
}

其中，

  • media_type代表媒体类型，可选值如下
类型 解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示，如幻灯片
screen 彩色设备屏幕
speech 演讲
tty 固定字间距的网络媒体，如电传打字机
tv 电视
  • exp为条件表达式，可用值如下
媒体特性 可采用的值 可用类型 可否min/max 简介
width <length> 视觉屏幕/触摸设备 yes 定义输出设备中页面可见区域宽度
height <length> 视觉屏幕/触摸设备 yes 定义输出设备中页面可见区域高度
device-width <length> 视觉屏幕/触摸设备 yes 定义输出设备中页面可见屏幕宽度
device-height <length> 视觉屏幕/触摸设备 yes 定义输出设备中页面可见屏幕高度
orientation portrait landscape 位图介质 no portait代表横屏，landscape代表竖屏
aspect-ratio <ratio> 位图介质 yes 定义浏览器长宽比
device-aspect-ratio <ratio> 位图介质 yes 定义屏幕的长宽比
color <integer> 视觉媒体 yes 定义输出设备彩色原件数目，如非彩色设备，值为0
color-index <integer> 视觉媒体 yes 定义输出设备的彩色查询表中的条目数，如没有使用彩色查询表，则值为0
monochrome <integer> 视觉媒体 yes 定义在一个单色框架缓冲区中每像素包含的彩色原件个数。如果不是单色设备，值为0
resolution <resolution> 位图介质 yes 定义设备的分表率，如96dpi
scan progressive/interlace 电视类型 no 定义电视类设备的扫描方式，progressive表示逐行扫描，interlace表示隔行扫描
grid <integer> 栅格设备 no 查询输出设备是否使用栅格或者点阵，1代表是，0代表否
  • and、not、only为连接符号，含义如下
关键字 说明
only 限定某种设备
and 逻辑与，连接设备名或表达式
not 排除某种设备
, 表示设备列表

之后我们可以在引入样式表文件时或在样式表中直接使用媒体查询，示例代码如下：

<!-- 1. 引入位置 -->
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 415px), only screen and (max-device-width: 415px)" href="index.css"/>

<!-- 2. 样式表中 -->
<style>
  @media screen and (min-width: 415px) and (max-width: 1368px) {
    .header  {
      height: 80px;
    }
  }
</style>

常见的手机屏宽不会超过415px，屏幕超过1368px的设备一般是大屏计算机，多为台式机

JS布局

使用JS进行响应式设计可以看作一记偏招，除了JS对设备类型的判断更为精准之外，由于CSS缺乏成熟的计算体系（只凭calc是完全不够的），在布局需要复杂计算时，JS也是必不可少的。
下面看一个使用JS判断设备类型（判断设备使用iOS还是Android系统）的示例：

compoted: {
   isAndroid () {
    // navigator为浏览器内置对象
    // 此处通过navigator.userAgent获取用户的设备信息
    let u = navigator.userAgent
    return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
  },
  isIOS () {
    let u = navigator.userAgent
    // !!为两次!的判定，当内容不为（null、undefined、空串等）时，判定为真
    return !!u.match(/\(i[^;]+;(U;) ? CPU.+Mac OS X/)
  }
}

这段代码通过用户的设备信息中是否含有特定关键字来判断设备类型，这是一种极为常见的做法，不过媒体查询却无法做到这一点。
之后我们可以根据这两个计算属性使用动态类名、动态样式或直接使用JS等方式为DOM元素设置样式。

响应式tdtrcode

有关响应式设计的更多相关文章

  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. LC滤波器设计学习笔记（一）滤波电路入门 - 2

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

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

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

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

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

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

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

  8. 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

  9. ruby-on-rails - Rails 5，公寓和设计 : sign in with subdomains are not working - 2

    我已经使用Apartment设置了一个Rails5应用程序(1.2.0)和Devise(4.2.0)。由于某些DDNS问题，应用只能在app.myapp.com下访问(请注意子域app)。myapp.com重定向到app.myapp.com。我的用例是每个注册该应用的用户(租户)都应该通过他们的子域(例如tenant.myapp.com)访问他们的特定数据。用户不应限定在其子域内。基本上应该可以从任何子域登录。重定向到租户的正确子域由ApplicationController处理。根据Devise标准，登录页面位于app.myapp.com/users/sign_in。这就是问题开始的

  10. ruby-on-rails - 设计中的 ArgumentError::RegistrationsController#new 错误的参数数量(2 代表 0..1) - 2

    我在关注RyanbatesRailsCast的devise和omniauth(第235集-devise-and-omniauth-revised)。当我尝试使用Twitter登录时，标题中不断出现错误。defself.new_with_session(params,session)ifsession["devise.user_attributes"]new(session["devise.user_attributes"],without_protection:true)do|user|user.attributes=paramsuser.valid?end完整跟踪:C:/Ruby20

随机推荐