我经常听到其他人谈论自适应布局，这是一件非常重要的事情。我最近完成的一个项目需要适应不同的屏幕尺寸，因此我简要研究了Web响应式布局。实际上，原理很简单。我和大家分享了。如图所示，响应式布局是响应式布局的实施例。简而言之，响应式布局意味着网站可以与多个终端兼容，而不是为每个终端制作特定的版本。随着移动设备的兴起，这一概念开始流行。例如，头条不是响应式布局。他使用设备信息的实时检测在两个网站www.toutiao.com和m.toutiao.com之间切换。最近流行的开发人员社区segmentfault.com是一种响应式布局。当您拖动浏览器窗口的大小时，页面的布局将改变。响应式布局不是绝对的，好是坏。需要根据网站的性质来确定。例如，头条有很多页面元素，并且页面需要包括所有屏幕尺寸。样式显示不是很容易操作。但是，segmentfault页面具有较少的元素，而是放置了。易于维护。让我们用一个例子来说明如何快速实现Web响应式布局。首先，使用@media关键字为不同的屏幕尺寸设置不同的样式。关于@media，我们在下面有一个更详细的介绍代码片段：type =“ text / css”; ＆amp; gt; @media only screen and（min-width：480px）{.col-sm-6，.col-sm-12 {float：left;} .col-sm-12 {width：100％;} .col-sm- 6 {width：50％; }} @ media only屏幕和（最小宽度：768像素）{。col-md-6，.col-md-12 {float：向左；} .col-md-12 {宽度：100％；} .col- md-6 {width：50％; }} class =“ container”＆amp; gt; class =“ col-md-12 col-sm-12 row” class =“ col-md -6 col-sm-12 col-1 col”。 Lorem ipsum dolor坐下，私立教育专家，seu do eiusmod tempor incididunt ut Labore et dolore magna aliqua。尽量避免抽烟，不要因劳动而锻炼。 Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。不正当的圣人occaecat cupidatat，在culfi qui officia deserunt模具劳动的罪魁祸首中脱颖而出。 -sm-12 col-2 col＆gt; Lorem ipsum dolor坐下，私立教育专家，seu do eiusmod tempor incididunt ut Labore et dolore magna aliqua。尽量不要抽烟，不要因抽烟而锻炼，而要在抽烟者自愿的抽烟活动中抽空抽烟，而在抽烟者中抽出的抽烟量是无效的。壁画。不擅长于圣人的神职人员，必须在有罪不罚的情况下动手动手做动手。让我们简单地解释一下上面的代码段“最小宽度”，即当屏幕尺寸大于当前值时，该样式才会生效。外部div包裹了两个内部div。 col-md-6col-sm-12当屏幕尺寸大于768px时，子div的宽度是父div的一半，因此并排。当屏幕尺寸大于480px时，子div的宽度与父div的宽度相同。下图显示了不同尺寸的效果图。注意768px480px的学生再次发现了问题。没有办法看到两个图片，它太小了。是的，我们还没有完成响应式样式。此时，让我们将下面的代码行添加到头部，然后重试吗？所以问题是，图片1的大小确实大于768px，但也大于480px，那么如何根据768px的大小排列呢？这里涉及CSS优先级：CSS的基本优先级如下（外部样式）。 （内部风格）内部风格表＆amp; lt; （内联样式）内联样式，如果优先级相同，则有一个优先原则，后者将覆盖前一个原则。例如，当屏幕尺寸缓慢增加到768px时，后者始终有效。名称=“视口” content ＝“ width ＝ device-width，initial-scale ＝ 1.0，maximum-scale ＝ 1.0，user-scalable ＝ 0”出现了一个神奇的场景：width ＝ device-width：意味着该宽度不取决于原始像素（px），但取决于屏幕的宽度。然后，我们完成了。如果您需要下载源代码，请单击，然后单击以在线查看。如果您想知道meta为什么会产生如此大的影响，请阅读以下内容。什么是Meta ViewPort？移动浏览器将页面放在虚拟“视口”中，通常是虚拟“视口”。宽于屏幕，并且默认情况是将网页压缩到一个小窗口中以进行完整预览，因此不会损坏不适合手机布局的网页。 Safari浏览器的移动版本最近引入了该视图