草庐IT

你没事吧？没事就来看看这篇响应式方案

一条小尾鱼 2023-03-28 原文

前言

hi大家好，我是小鱼，今天讨论的是前端响应式方案。这也是很多面试官喜欢问的一个问题，题型考察范围比较广，区分度比较大，一题就把你看得透透的，特别是移动端的更不可避免。所以，卷起来吧。

响应式

一提到响应式就会有很多概念，概念 == 术语，专业，高深，冷酷，无情。响应就是有响有应，这是一件双箭头的事情（我喜欢你，你也喜欢我）注意：前提是合适。那换做是屏幕也是同理，根据屏幕大小，显示合适的内容。我们先给它一个定义​​↓​​

同一个页面在不同的屏幕尺寸的一个终端设备上有一个不同的布局表现，简单来说可以适配多端，同时让用户在多个设备上都有一个很好的页面源体验。

可能有些小伙伴会认为响应式布局是CSS3之后才有的一个概念，响应式就是flex或者媒体查询，其实不是这样，像早期的一些流排版，可能会结合一些​​min-width​​，​​min-height​​和百分比，一定程度上可以实现响应式布局。或者大家熟悉的​​REM​​、​​EM​​、​​VW/VH​​还有多栏布局，图片的话有图片集​​srcset​​......等等

​​在讨论方案之前我们先回顾一些常用的单位​​

单位

px

px（pixel），表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。像素分为两种类型：css像素和物理像素。

  1. CSS像素(CSS pixels): 又称为逻辑像素，是为web开发者创造的，在CSS和javascript中使用的一个抽象的层
  2. 设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的
每一个CSS声明和几乎所有的javascript属性都使用CSS像素，因此实际上从来用不上设备像素 ，唯一的例外是screen.width/height，这也是为什么给不同分辨率的屏幕上设置一样的字体大小呈现出来的却不一样。

rem/em

​​em​​的字体大小是相对于最近的被设定过字体大小的祖先元素

​​rem​​是CSS3新增的一个相对单位（root em，根em），rem为元素设定字体大小时相对的只是根元素html，默认情况下，html元素的​​font-size​​为16px。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

vw/vh

​​vw/vh​​也是一个相对单位（类似于​​rem​​，​​em​​)

vw：viewport width 视口宽度单位，1vw = 1/100视口宽度

vh：viewport height 视口高度单位，1vh = 1/100视口高度

注意：和百分比是有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于视口来说的。实际开发中用vw最多，因为vh是相对视口高度计算尺寸的，一般我们都是相对的视口宽，而且使用vh需要考虑全面屏，视口高度尺寸会偏大。

实现方案

媒体查询

刚刚介绍px的时候说到，我们所用到的1px（css像素）所表示的物理像素在不同终端设备上的大小是不同的，那我们要解决这样的问题，​​BiuBiuBiu​​ ---- 媒体查询（Media Query）闪亮登场，是CSS3的新语法。

  • 使用@media查询，可以针对不同的媒体类型定义不同的样式
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询
那我们就可以针对不同的屏幕大小定义不同的样式，来达到适配的效果。

​​栗子↓​​

// 设置max-width 是指定义输出设备中页面最大可见区域宽度，当宽度小于某个像素时，会执行里面的样式

@media screen and (max-width: 1334px){
.container{
width: 600px;
}
}

@media screen and (max-width: 960px){
.container{
width: 400px;
}
}

@media screen and (max-width: 750px){
.container{
width: 200px;
}
}
外链式
​​min-width​​：最小值，大于或者等于该值加载css
​​max-width​​：最大值，小于或者等于该值时加载css
或者一些多个端口：xx < 视口 < xx

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 通用的样式写在最前面 -->
<link rel="stylesheet" href="./css/common.css">
<!-- 针对不同的视口，选择不同的样式 -->
<link rel="stylesheet" href="./css/large.css" media="screen and (min-width:1200px)">
<!-- 为了避免更改了顺序，导致临界点发生改变，通常错开1px -->
<link rel="stylesheet" href="./css/small.css" media="screen and (max-width:1201px)">
<!-- 各个视口相似的样式要提取出来，防止书写多次 -->
<title>Document</title>
</head>
<body>
<!-- 在视口>1200的时候显示红色字体，绿色背景 -->
<!-- 在视口<1200的时候显示蓝色字体，粉色背景 -->
<div class="box">你好</div>
</body>
</html>
缺点：如果项目适配多端情况比较多，改变浏览器大小时需要改变的样式就很多，这么多的样式管理起来就很繁琐。

百分比

百分比大家都很熟悉了，​​width​​、​​height​​属性的百分比依照与父属性的宽高，设置百分比可以让浏览器中的元素随着浏览器的大小而变化，这样也可以实现响应式，简单写个栗子吧。

.box {
width: 100%;
height: 500px;
background-color: rgb(243, 151, 45);
display: flex;
justify-content: space-around;
align-items: center;
}
.item {
width: 20%;
height: 150px;
background-color: rgb(211, 56, 56);
}

百分比只能做一些简单的响应式，如果全部使用百分比单位来实现响应式布局，有很明显的缺陷：

  1. 计算量来说比较复杂，我们刚刚只写了几个简单的元素，如果页面比较丰富呢？全部按照设计图换算成百分比在成本上来说太高了。
  2. css中的子元素中的百分比（%）到底是谁的百分比？，width和height相对于父元素的width和height，top和bottom相对于直接非static定位(默认定位)的父元素的高度，left和right相对于直接非static定位(默认定位的)父元素的宽度，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，这么多的条条框框，会造成我们使用百分比单位容易使布局问题变得复杂、混乱。我找到了我给大家列出来
  • ​​padding​​百分比是相对于​​参照元素的宽度​​而言；
  • ​​margin​​百分比是相对于​​参照元素的宽度​​而言；
  • ​​width​​百分比是相对于​​参照元素的宽度​​而言；
  • ​​left​​、​​right​​百分比是相对于​​参照元素的宽度​​而言；
  • ​​height​​百分比是相对于​​参照元素的高度​​而言；
  • ​​top​​、​​bottom​​百分比是相对于​​参照元素的高度​​而言；
  • ​​line-height​​百分比是相当于​​元素自身文字大小​​而言；
  • ​​background-size​​百分比是相当于​​元素自身的宽高​​而言；
  • ​​border-radius​​百分比是相当于​​元素自身的宽高​​而言；
  • ​​transform​​百分比是相当于​​元素自身的宽高​​而言；
  • ​​background-position​​百分比和其它的百分比单位表现都不一样，具体可以用以下公式计算：
positionX = (容器的宽度-图片的宽度) * percentX;
positionY = (容器的高度-图片的高度) * percentY;

rem

rem这个单位刚刚已经介绍过了，简单、灵活。它是相对于根元素html的​​font-size​​来决定大小的，根元素的​​font-size​​相当于提供了一个基准，当页面的size发生变化时，只需要改变​​font-size​​的值，那么以rem为固定单位的元素的大小也会发生响应的变化。

计算rem

不知道大家有没有写过移动端的项目，在做移动端各种尺寸屏幕的适配时，用的最多的就是rem方案。我们都写过这样的代码，来设置根字体大小。比如把我们的html的​​font-size​​设置成1px，这样1rem就等于1px，因为我们标注稿750px，是基于二倍屏的，1个css单位等于2个实际单位，所以我们的​​font-size​​设置为0.5px，这样我们设置尺寸时，rem和标注稿的px，就是1比1映射的。当然这里所有的大小都是相对于标注稿尺寸来说的，如果是其他屏幕的尺寸，html的​​font-size​​肯定要相应的变大或者变小。

// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
setRem()
}

转换rem

实际开发的时候，还是需要我们去计算对应的rem值去开发。

​​postcss-pxtorem​​
是一个用JavaScript工具和插件转换CSS代码的工具。

1. 安装 ​​postcss-pxtorem​​

$ npm install postcss-pxtorem -D
2. 配置Postcss

项目下新建​​postcss.config.js​​文件

module.exports = {
plugins: {
'postcss-pxtorem': {
//根元素字体大小
rootValue: 16,
//匹配CSS中的属性，* 代表启用所有属性
propList: ['*'],
//转换成rem后保留的小数点位数
unitPrecision: 5，
//小于12px的样式不被替换成rem
minPixelValue: 12,
//忽略一些文件，不进行转换，比如我想忽略 依赖的UI框架
exclude: ['node_modules']
}
}
}
配置好了在开发就可以直接使用​​px​​，设计图给多少就写多少，是不是很nice！！！

这里肯定有很多小伙伴会提到字体的问题，用户群体有老年人，有大写字号或者超大，设计师不希望字体自适应。这种就需要你自己去对不同的字号做一些比值，涉及到一些缩放比例，这个比例定好之后，可以转换成大写的PX，通过mixin或者可以通过一些特殊的类对比需不需要​​scale​​。大家可以根据自己的场景去实现。

淘宝的​​flexible.js​​

​​flexible.js​​用来处理移动端各种设备兼容和尺寸众多的问题。
“了解一个框架的实现原理比用一个框架更有意思”，推荐文章​​---→​​ ​​手写flexible.js的原理实现​​

vw/vh

上面已经介绍过了，忘了的再上去看一遍，加深印象哈哈哈哈哈。使用vw/vh布局，可以实现视口宽度不同，网页元素宽高等比缩放效果，比rem的优势在于，在代码中直接写vw/vh就能实现移动适配效果，不用引入js文件，比rem更简单，但有兼容问题，ie9-11不支持vmin和vmax，opera浏览器整体不支持vw单位。

vw/vh是相对单位，vw相对视口的宽度，vh相对视口的高度。
1vw = 1/100的视口宽度，1vh = 1/100的视口高度。
比如iphone6/7/8的视口宽是375，换算成vw就是3.75。.

除了vw和vh外，还有vmin和vmax两个相关的单位

  • vmin：vw和vh中的较小值
  • vmax：vw和vh中的较大值
但实际开发中用vw最多，因为vh是相对视口高度计算尺寸的，一般我们都是相对的视口宽，而且使用vh需要考虑全面屏，视口高度尺寸会偏大。

// 比如对于iphone6/7 375*667的分辨率 1px = （1/375）*100 vw
$vm_base: 375;
@function vw($px) {
@return ($px / 375) * 100vw;
}

.box {
width: vw(150);
height: vw(50);
}

end

响应式布局就是通过检测视口的宽度，通过一系列方式来让页面适配起来。这些方式各有利弊，大家根据自己的需要来选择。

没事你pxcodebackground-colorcsshtmlCSSHtml/CSS前端开发

有关你没事吧？没事就来看看这篇响应式方案的更多相关文章

  1. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

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

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

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

  4. Ruby 守护进程和 JRuby - 备选方案 - 2

    我有一个应用程序正在从Ruby迁移到JRuby(由于需要通过Java提供更好的Web服务安全支持)。我使用的gem之一是daemons创建后台作业。问题在于它使用fork+exec来创建后台进程，但这对JRuby来说是禁忌。那么-是否有用于创建后台作业的替代gem/wrapper？我目前的想法是只从shell脚本调用rake并让rake任务永远运行......提前致谢，克里斯。更新我们目前正在使用几个与Java线程相关的包装器，即https://github.com/jmettraux/rufus-scheduler和https://github.com/philostler/acts

  5. ruby-on-rails - 能够处理 rar/tar/zip/7z 的 Ruby/rubyzip 替代方案？ - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion我想知道是否有人知道Ruby的ruby​​zip替代品，它可以处理各种格式，特别是zip/rar/7z？我知道libarchive，但它对我的目的来说并不完整(它是一个很好的gem)。(澄清一下，libarchive-对我不起作用-因为

  6. ruby-on-rails - 对于 Ruby 应用程序，是否有比 Sanitize 更好的替代方案？ - 2

    我爱Sanitize.这是一个了不起的实用程序。我遇到的唯一问题是，它需要永远准备一个开发环境，因为它使用Nokogiri，这对编译时间来说是一种痛苦。是否有任何程序可以在不使用Nokogiri的情况下执行Sanitize的操作(如果没有别的，只是温和地执行它的操作)？这将以指数方式提供帮助! 最佳答案 Rails有自己的SanitizeHelper。根据http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html,它将Thissanitizehe

  7. ruby-on-rails - Rails 在记录 200 OK 后在做什么？ (调试响应时间慢) - 2

    我试图在我的RubyonRails应用程序中调试一个极其缓慢的请求调用。我已设法根据自己的喜好优化Controller方法，Rails的日志告诉我它已在XX毫秒内完成操作(Completed200OKin5049ms(Views:34.9ms|ActiveRecord:76.3ms)).但是，在加载页面时，在浏览器中实际呈现任何内容之前打印此消息很长；最多约15秒的等待时间。Rackmini-profiler证实了这一点，告诉我GET操作(不计算完成Controller操作所花费的时间)花费了14秒左右。(分析器还确认Controller操作的执行时间约为5秒)。我可以接受Contro

  8. ruby - 带有 header 的 Sinatra 流式响应 - 2

    我想通过Sinatra应用程序代理远程文件。这需要将带有header的HTTP响应从远程源流式传输回客户端，但我不知道如何在Net::HTTP#提供的block内使用流式API时设置响应header获取响应。例如，这不会设置响应头:get'/file'dostreamdo|out|uri=URI("http://manuals.info.apple.com/en/ipad_user_guide.pdf")Net::HTTP.get_response(uri)do|file|headers'Content-Type'=>file.header['Content-Type']file.re

  9. ruby - Net::HTTP 对 HTTPS 请求的响应极其缓慢 - 2

    出于某种原因，在我的开发机器上，我对通过Net::HTTP执行的HTTPS请求的响应非常非常慢。我试过RestClient和HTTParty，它们都有同样的问题。它似乎是凭空冒出来的。我已毫无问题地提出这些请求数百次，但今天它们的速度慢得令人难以忍受。pry(main)>putsTime.now;HTTParty.get('https://api.easypost.com/v2/addresses');putsTime.now;2015-04-2908:07:08-05002015-04-2908:09:39-0500如您所见，响应耗时2.5分钟。不仅仅是这个EasyPostAPIUR

  10. ruby - 使用 Ruby 将 HTTP GET 的响应主体流式传输到 HTTP POST - 2

    我正在尝试下载一个大文件，然后使用Ruby将该文件发布到REST端点。该文件可能非常大，即超过可以存储在内存中甚至磁盘上的临时文件中的容量。我一直在用Net::HTTP尝试这个，但我愿意接受任何其他库(rest-client等)的解决方案，只要他们做我想做的事情。这是我尝试过的:require'net/http'source_uri=URI("https://example.org/very_large_file")source_request=Net::HTTP::Get.new(source_uri)source_http=Net::HTTP.start(source_uri.ho

随机推荐