西西木科技-专业的shopify liquid开发机构-前端JS丨a href=’https://dev.weswoo.com/’>react后端丨API接口丨shopify plus丨外贸独立站
大家好，我是IT培养学院北京分院第25期的学生，一个正直、纯洁、善良的Web前端程序员。
今天给大家分享一下，修真学院官网css任务9、深入思考的知识点——响应式的优缺点？ ？
一、背景介绍
随着智能手机的快速发展，普通大众使用手机上网的频率大大增加。
手机屏幕较小，宽度通常在600像素以下； PC的屏幕宽度一般在1000像素以上（目前主流宽度为1366×768），有的甚至达到2000像素。 在不同尺寸的屏幕上呈现相同的内容并获得满意的效果并不容易。
只能在PC上显示的传统网页如何适应这种趋势响应式，成为人们开始关注和解决的问题。 于是响应式布局的概念就被提出了。
2.知识分析
2.1 什么是响应性
响应式布局是 Ethan Marcotte 在 2010 年 5 月提出的概念。简单来说，它意味着一个网站可以兼容多个终端——而不是为每个终端制作特定的版本。 这个概念是为了解决移动互联网浏览而诞生的。 响应式布局可以为不同终端上的用户提供更舒适的界面和更好的用户体验。 随着当前大屏移动设备的普及，用“大势所趋”来形容也不为过。
2.2 响应性的优点
1.响应式设计可以为用户提供友好的网页界面。 相同的布局在不同的设备上可以有不同的布局。 这是响应式设计的最大优势。 如今，科技飞速发展，每天都有新的智能手机推出。 如果你有响应式网页设计，用户可以始终保持与网站的连接，这是响应式实现的根本和初衷。
2、在开发、维护、运营方面，响应性的成本会比多版本低很多，无需花费大量时间维护网站
3、更换方便。 响应式设计是特定于页面的。 只能更改必要的页面，其他页面不受影响。
2.3 响应式的缺点
1、为了适应不同的设备，响应式设计需要大量针对不同设备专门创建的css和js代码，导致文件体积增大，影响页面加载速度。
2、响应式设计中，图片、视频等资源一般都是统一加载，导致实际加载的图片或视频大于其在低分辨率机器上的显示需求，造成不必要的流量浪费。 影响加载速度；
3. 局限性。 响应式不适合一些大型门户网站或者电商网站。 一般门户网站或者电商网站在一个界面中内容很多，设计风格很难把控。 代码过多会影响运行速度。
3. 常见问题
如何实现响应式？
4.解决方案
1.流程布局
使用灵活的网格构建网站布局响应式，可动态调整以适应任何宽度。 网格布局使用相对长度单位。
这些相对长度主要用于网格属性，例如宽度、间距或空白。
为了更好地控制流体布局，可以使用最小宽度（min-width）、最大宽度（max-width）、最小高度（min-height）和最大高度（max-height）并应用它们到容器元素（container）。
vw：窗宽； vh：窗口高度； vmin：窗口最小尺寸； vmax：窗口最大尺寸；
2. 媒体查询MediaQuery
自动检测屏幕宽度，然后加载相应的CSS样式，为目标设备提供针对性的样式，起到响应式设计的作用。
@media all and (min-width: 800px) and (max-width: 1024px) {...}
在构建响应式网站时，它应该能够适应各种不同的窗口大小，无论设备分辨率如何。 仅当网站布局损坏、看起来很奇怪或内容无法显示时才需要设置断点。
3.视口
meta name="viewport" content="width=device-width, initial-scale=1.0"
宽度：控制视口的大小。 您可以指定一个值，例如 600，也可以指定一个特殊值，例如 device-width，它是设备的宽度（单位是缩放到 100% 时的 CSS 像素）。
initial-scale：初始缩放比例，即页面第一次加载时的缩放比例。
最大比例：允许用户缩放到的最大比例。
最小比例：允许用户缩放的最小比例。
user-scalable：用户是否可以手动缩放。
4、流媒体
当视口开始调整大小时，介质大小并不总是适当变化。 因此图片、视频和其他媒体类型需要在视口变化时按比例变化。
按比例缩放媒体的一种快速方法是使用最大宽度值 100%。 这样做可以确保随着视口变小，任何媒体都会与其容器宽度成比例地缩放。
img, video, canvas{
最大宽度：100%；
5. 编码实践
demo1,2是响应式网站示例，demo3是响应式网站设计
演示1
演示2
演示3
6.拓展你的思维
响应式和自适应有什么区别？
简而言之，响应能力就像液体一样，可以自动适应不同的屏幕尺寸。 响应式样式根据目标设备自动改变显示类型、宽度、高度等样式，可以很好地解决不同屏幕尺寸的显示问题。 自适应设计使用基于断点的静态布局。 页面加载后，就无法再自动适应。 自适应将自动检测屏幕尺寸以加载适当的工作布局。 换句话说，当你想对你的网站使用自适应设计时，你必须设计各种常见的屏幕布局。 显然，自适应设计需要做更多的工作。 响应式设计能够更好地适应复杂的媒体设备需求响应式的优点和缺点是什么？ ？，能够很好地解决显示和性能问题。
7. 参考文献
HTML 和 CSS 高级指南第 4 部分 – 响应式设计
响应式设计与自适应设计：设计师的最佳选择是什么？
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。