响应式开发经验-沈阳网站建设

什么是响应？响应页面在不同的屏幕上具有不同的布局，换句话说，使用相同的html在不同分辨率下的不同排版。如下图所示：

响应式布局是解决适应性问题。传统的开发方法是开发一套PC，并开发一套手机，并且只要你开发一套就使用响应式布局。因为它使用相同的html，所以它的JS逻辑交互只需要编写一个集合。缺点是CSS很重。传统的移动电话适配器有三种常见的解决方案。第二是使用全球rem。首先，根据屏幕，1rem等于px的数量，然后将html标签的font-size设置为rem。屏幕越大，字体大小越大，然后页面元素的宽度和高度以及字体大小由rem缩放。第三个是阿里的弹性盒子。该方案类似于第二种方案。页面内容的字体大小是使用的px而不是缩放的rem。还需要引入框架。第三个应该比第二个更合理，因为主文本的字体通常是14px或16px。如果这个手机的一个页面是15.5px而另一个页面是14.9px，这可能有点奇怪。响应式布局的使用不需要转换rem。让我们逐步分析上面的例子中的响应性。 1.在白色

的两侧设置不同的分辨率页面 第一页的正文内容具有较大的宽度。当屏幕超过该宽度时，中间体的内容很大，以至于它不会变大，也就是说，它将被固定到一个大的宽度，然后居中，如大。它是1080px。然后，当它大于1024px时，页面主体的内容为960px，并且两边自动保持白色;两者之间的差距是500px到500px之间的500px;当它小于500px时，它被认为是手机，并且双方被20px白化。所以计算一下，容器代码如下：

总的想法是留下空白是合适的，不要留太多，导致中间内容过于狭窄，并且不能使中间的内容过大。这实际上与引导容器的想法一致，但您可能必须根据您自己的业务特征，用户群等制作不同的美白策略.2。屏幕变小，一个变窄，另一个不变;

当屏幕变小或浏览器窗口被拉下时，中间内容的宽度不能保持在1080px，它必须更小，并且在变小的过程中，它通常保持不变而另一边变窄与页面，如下所示。显示：

右侧的结果栏宽度保持不变，左侧的表单栏宽度减小。因为右侧不容易看到，如果右侧变窄，那么字体应该相应减少，字体尺寸减小，右侧的白色空间变得太大，所以它不漂亮，所以你只能站在正确的位置。策略是缩小左边的内容。这种场景更为常见。如果它是右侧的化身，则无法减少。一旦它的高度减小，它就会减少，导致上下空间，所以这种情况不能移动。 3.保持中间空白并缩小内容宽度

左栏的宽度应该如何变小？一个原则是保持两者之间的间距固定，两侧内容的宽度相应减小，如下图所示：

所以有必要使用CSS3的calc，如下图所示：123input {width: calc（（100％-20px）/2）} calc兼容性IE10及以上支持，android 4及以下版本不支持，所以考虑到不支持该设备可以轻松兼容，如下面的代码所示：1234input {width: 48％; width: calc（（100％-20px）/2）;}如果你不支持calc，使用48％，所以差别不是很大不是很精确。如果您真的需要它，您可以编写更多媒体查询以变得更加精确。 4.左右布局成为上下布局。当屏幕拉得很小时，左列的缩小非常小。如果它更小，则不会协调。因此，这次，左右布局应该更改为上下布局。把它放在下面。因为右侧列是大屏幕上的浮点:它会覆盖中间屏幕中的浮动属性并变为浮点:无。原始右栏有四条线，相对较短。您可以考虑将它下面的三条线连续放置，也就是让它们浮动。如下面的代码所示：123456789101112131415.cal-result {float: right; width: 330px;} 1个media（max-width: 800px）{。cal-result {float: none; width: 100％;}。cal-result .result {float: left; width: 33％;}}

让每个结果取1/3，然后浮动，效果如下：

5.当宽度太小时，换行自动，特别是当内容为列表ul的形式时，不能放置的li应自动更改为下一行。当然，您也可以手动控制它，如下所示：1234567891011 media（max-width: 800px）{。result {width: 33％;}} 1个media（max-width: 400px）{。result {width: 50％在屏幕上当宽度小于400时，每个结果都是50％，因此它排列成两行。这也是一种常见的方法，但在我们的例子中，如果数量很小，它仍然在iPhone 6 375px屏幕上排名，如果它可以在一行中保持相对漂亮。并且固定50％，如果有数量相对较大时有可能重叠，有一种方法可以做到这一点不是写死区宽度，而是将死区最小宽度写入50％，所以当内容相对较长，浮动元素如果同一条线不适合，它会自动换行。但众所周知的仍然是一种使其根据内容的长度自动换行的方法，当然，你可以使用JS计算，但是有点麻烦。这时flex派上用场，非常简单，只需设置两个属性：12345.result-container {display: flex; justify-content: space-between; flex-wrap: wrap;}

Space-between允许子元素以相等的间隔放置在容器的两侧，而wrap属性使子元素自动换行。当容器不够宽时，可以实现以下效果：

还有一个小问题，就是当内容刚刚满时，两个项目之间没有空格，如下所示：

这是放在一起的，因为flex的间距不能指定一个小的空间，所以只能通过margin或padding方法，比如添加margin-right：123.result: not（: last-child）{margin- Right: 10px ;}

效果如下：

这比坚持在一起更好。当从大屏幕变为小屏幕时，一些字体大小主要是字体大小，标题的间距应相应调整。这个小小的改变是一个步骤改变，而不是像rem这样的连续改变，而这种梯子一般只有两个足够，一个大屏幕，一个小屏幕。如果你需要做很多阶梯，那么你的排版可能会有问题。 6.使用响应式图像（如相同的标题图像），您需要在计算机上使用大图像，但在手机上使用小图像，否则会导致手机上流量浪费较慢，一种方法是使用背景-image组合媒体查询如下：1234567.banner {background-image: url（/static/large.jpg）;} media（max-width: 500px）{background-image: url（/static/small.jpg这个方法的缺点是它对SEO不是很友好，因为如果你使用img标签你也可以写一个alt属性。第二种常用方法是使用img的srcset或图片标记作为响应图片。这在《Effective前端7：加快页面打开速度》中提到，这里不再重复。除了大小屏幕，这种响应图片还可以考虑屏幕的屏幕，即dpr是2或更多，正常屏幕dpr的屏幕是1，即屏幕高dpr使用图片的2倍，而普通dp的屏幕使用1次。数字。 7.其他问题涉及某些地方大屏幕和小屏幕布局的差异。例如，当屏幕较大时，某些内容会被打碎，而小屏幕则很远。此时，您可能需要重复html并写入两个标签。隐藏屏幕时，隐藏小屏幕的html标签，当屏幕较小时，隐藏大屏幕的html标签。而这种情况不应该是正常的情况。如果您经常写两套，则表示您的页面可能不适合编写响应性。最好直接写两套。 还有一个问题，有时您可能想使用rem/transform:比例来进行大小缩放，但这必须是最好的策略，我们的原则是保持字体大小和间距不变，当屏幕跨度不是很大时。使用变换的结果是，当下拉屏幕时，内容变小，但由于变换不会导致重新排列，因此它占据的高度非常大，以至于不会跟随以下内容。这将必须手动计算内容的高度。此外，如果您使用rem，它与响应性的想法相冲突。如果页面的部分字体大小使用rem，而字体大小的另一部分使用px，则不协调。如果你编写rem all，则不需要使用响应式开发。此时您可能需要考虑它，UI是否存在问题？让UI重新调整。此外，有时可以使用高级媒体查询。例如，当高度小于高度时，框架不能超出页面的高度;当高度大于时，页脚的位置固定在底部，否则页脚位于下方。可以留空。