时间：2023-09-03 02:48:02 | 来源：网站运营
时间：2023-09-03 02:48:02 来源：网站运营
响应式布局，你需要知道的一切：2011年，Google 发布了 Android 4.0，在经历了 Cupcake，Donut，Froyo 等多个甜品名称版本的迭代后，安卓终结了 Symbian（塞班）的霸主地位，迅速占领了手机市场跃居全球第一。同年，腾讯发布了微信开始进军移动互联网，阿里也在 2013 年宣布 ALL IN 无线，随着智能设备的普及和移动互联网时代的到来，响应式布局这个词开始频繁地出现在 Web 设计和开发领域，作为一名优秀的前端攻城狮，要将极致的用户体验和最佳的工程实践作为探索的目标 ): balabala...最近一门新兴的学科“响应式建筑(responsive architecture)”开始在探讨物理空间根据流动于其中的人进行响应的方法。建筑师们通过把嵌入式机器人与可拉伸材料结合的方法，尝试艺术装置和可弯曲、伸缩和扩展的墙体结构，达到根据接近人群的情况变化的效果。运动传感器与气候控制系统相结合，调整围绕人们周围的房间的温度以及环境照明。已经有公司制造了“智能玻璃技术”，当室内人数达到一定的阀值时，它可以自动变为不透明状态，为人们提供更多隐私保护Web 响应式设计的理念与之非常相似，只不过在这里，
在线咨询
1 css px = 3 * 3 device px // IPhone X 中，1 个 CSS 像素对应 3*3 的 9 个设备像素点复制代码而上面这个比值 3 就是设备像素比（Device Pixel Ratio，简称 DPR）。window.devicePixelRatio // IPhone X 中等于 3，IPhone 6/7/8 中等于 2，Web 网页为 1复制代码像素是一个固定单位，一般我们不会使用固定像素来做响应式布局，但是你需要了解他。相反，响应式布局里经常会用到相对单位，比如 EM。font-size，p { font-size: 16px; padding: 1em; /* 1em = 16px */}复制代码如果元素没有显式地设置 font-size，那么 1em 等于多少呢？em 没啥关系，这里跟 font-size 的计算规则相关，回顾一下。如果元素没有设置 font-size，会继承父元素的 font-size，如果父元素也没有，会沿着 DOM 树一直向上查找，直到根元素 html，根元素的默认字体大小为 16px。EM，REM 就很简单了。rem 就等于根元素 html 的字体大小，html { font-size: 14px;}p { font-size: 1rem; /* 1rem = 14px */}复制代码所以，如果我们改变根元素的字体大小，页面上所有使用 rem 的元素都会被重绘。html 的字体大小，所以 REM 的使用更加广泛一些PostCSS 插件在基于 Webpack 构建的项目中自动转换的例子，var px2rem = require('postcss-px2rem');module.exports = { module: { loaders: [ { test: //.css$/, loader: "style-loader!css-loader!postcss-loader" } ] }, postcss: function() { return [px2rem({remUnit: 75})]; }}复制代码我们已经有响应式单位了，接下来要怎么让页面支持响应式布局呢？viewport。viewport 的文章，viewport 最先由 Apple 引入，用于解决移动端页面的显示问题，通过一个叫 <meta> 的 DOM 标签，允许我们可以定义视口的各种行为，比如宽度，高度，初始缩放比例等，<!-- 下面的 meta 定义了 viewport 的宽度为屏幕宽度，单位是 CSS 像素，默认不缩放 --><meta name="viewport" content="width=device-width, initial-scale=1">复制代码Peter-Paul Koch 在文章中将移动浏览器的视口分为三种。viewport meta 标签，它可以创建一个虚拟的布局视口（layout viewport），这个视口的分辨率接近于 PC 显示器。这样一来，由于两者的宽度趋近，CSS只需要像在PC上那样渲染页面就行，原有的页面结构也基本不会被破坏。layout viewport 是一个固定的值，由浏览器厂商设定，document 获取布局视口的宽度和高度，var layoutViewportWidth = document.documentElement.clientWidthvar layoutViewportHeight = document.documentElement.clientHeight复制代码visual viewport，我们就可以实现网页的拖拽和缩放了，为什么？visual viewport 上，创建一个宽为 980px 的 layout viewport，于是用户可以在 visual viewport 中拖动或缩放网页来获得更好的浏览体验。window 获取，var visualViewportWidth = window.innerWidthvar visualViewportHeight = window.innerHeight复制代码meta 设置将布局视口转换为理想视口，<meta name="viewport" content="width=device-width">复制代码<meta> 进行设置，viewport 元标签的取值有 6 种，vw 和 vh 的支持相对较晚，在 Android 4.4 以下的浏览器中可能没办法使用，下面是来自 Can I use 完整的兼容性统计数据，vw 和 vh 常被用于布局，因为它们是相对于视口的，<!-- 假设我们设置视口为完美视口，这时视口宽度就等于设备宽度，CSS 像素为 375px --><meta name="viewport" content="width=device-width, initial-scale=1"><style> p { width: 10vw; /* 10vw = 1% * 10 * 375px = 37.5px */ }</style>复制代码我们说百分比也可以用来设置元素的宽高，它和 vw，vh 的区别是什么？FlexBox 的支持已经相对完善，下面是 Can I use FlexBox 完整的兼容性情况，FlexBox 里的两个角色：容器和子元素。display 属性为 flex，就可以将一个元素设置为 FlexBox 容器，我们可以通过定义它的属性，决定子元素的排列方式，属性可选值有 6 种，FlexBox 基于轴线，只能解决一维场景下的布局，作为补充，W3C 在后续提出了网格布局（CSS Grid Layout），网格将容器再度划分为 “行” 和 “列”，产生单元格，项目（子元素）可以在单元格内组合定位，所以网格可以看作二维布局。Grid 的实现中，通常会使用到媒体查询，这也是响应式布局的核心技术。min-width 时应用样式max-width 时应用样式portrait | landscape，当前设备的方向min-width 和 max-width 取值的过程，称为设备断点选择，它可能取决于产品设计本身，下面是 百度 Web 生态团队 总结的一套比较具有代表性的设备断点，/* 很小的设备（手机等，小于 600px） */@media only screen and (max-width: 600px) { }/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */@media only screen and (min-width: 600px) { }/* 中型大小设备（横屏的平板, 大于 768px） */@media only screen and (min-width: 768px) { }/* 大型设备（电脑, 大于 992px） */@media only screen and (min-width: 992px) { }/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */@media only screen and (min-width: 1200px) { }复制代码如果你需要对细分屏幕大小进行适配，ResponsiveDesign 站点上的这篇文章 Media queries for common device breakpoints 可能会有所帮助。16px，行高大于 1.2em。p { font-size: 16px; line-height: 1.2em; /* 1.2em = 19.2px */}复制代码我的大部分性能优化工作都集中在 JavaScript 和 CSS 上，从早期的 Move Scripts to the Bottom 和 Put Stylesheets at the Top 规则。为了强调这些规则的重要性，我甚至说过，“JS 和 CSS 是页面上最重要的部分”。几个月后，我意识到这是错误的。图片才是页面上最重要的部分。图片几乎占了网页流量消耗的 60%，雅虎军规和 Google 都将图片优化作为网页优化不可或缺的环节，除了图片性能优化外，响应式图片无疑带来更好的用户体验。
viewport，可以通过设置元素的最大宽度进行限制，img { max-width: 100%;}复制代码类似的，相同的规则也应该用于一些其他的嵌入式元素，比如 embed，object，video 等。srcset 和 sizes 属性，对于兼容性不好的浏览器，会继续使用默认 src 属性中的图片，所以我们可以放心大胆的使用。<!-- 响应式图片 --><img srcset="example-320w.jpg 320w, example-480w.jpg 480w, example-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="example-800w.jpg" alt="An example image">复制代码如果我们书写了上面代码中的图片，浏览器会根据下面的顺序加载图片，srcset 中最接近这个尺寸的图片并显示HTML5 标准中的 picture 标签实现类似的效果，<picture> <source media="(max-width: 799px)" srcset="example-480w-portrait.jpg"> <source media="(min-width: 800px)" srcset="example-800w.jpg"> <img src="example-800w.jpg" alt="An example img"></picture>复制代码关键词：布局,响应
