响应式开发的心得-网站建设

2023-11-06 分类：网站建设

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

响应式布局是为了解决适配的问题。传统的开发方式是pC端开发一套。手机端再开发一套。而使用响应式布局只要开发一套就好了。因为它是用的同样html。所以它的JS逻辑交互也只需写一套就好了。缺点是CSS比较重。传统的手机端适配常见有三种解决方案。种是bootstrap的columns布局；第二种是使用全局的rem。先根据屏幕换算1rem等于多少个px。然后设置html标签的font-size为多少个rem。屏幕越大。则font-size越大。然后页面所有的元素的宽高和字体大小都用rem等比例缩放；第三种是阿里的flex box。这种方案和第二种类似。不同点是页面内容的字体大小是用的px。而不是比例缩放的rem。种需要额外引入一个框架。第三种相对第二种来说应该更合理点。因为正文的字体常用的为14px或者16px。如果一个页面在这个手机字号是15.5px。在另外一个手机又变成了14.9px。这样可能会有点奇怪。而使用响应式布局就不需要进行rem的换算。下面通过上图的那个例子一步一步地分析怎么做响应式。1.设置不同分辨率页面两边留白

先一个页面的主体内容有大的宽度。当屏幕超过这个宽度时这个中间的主体内容大就这么大了。不会再变大了。也就是说它固定一个大宽度。然后居中显示。如大为1080px。然后当大于1024px时。页面主体内容小宽为960px。两边自动留白；在500px到1024px之间两边保持留白40px；而当小于500px时就认为是手机。两边留白20px。所以计算一下。container的代码如下：

总体的思想是留白要合适。既不能留太多。导致中间内容太窄。也不能让中间的内容显得太大。这个其实和bootstrap的container思想一致。只是你可能要根据你自己的业务特点、用户人群等做不同留白策略。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.左右布局变成上下布局当屏幕拉得很小的时候。左栏已经缩得很小了。再变小就不协调了。所以这个时候要把左右布局改成上下布局。把右边的内容往下面放。因为右栏在大屏的时候是float:right。所以在中屏的时候覆盖掉这个浮动的属性。变成float:none就可以了。原本右栏的内容有四行。都比较短。可以考虑把它下面的三行排成一行。即让它们浮动。如下面代码所示：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%;}}

让每一个result占1/3。然后浮动。效果如下：

5.宽度太小时。自动换行特别是当内容是列表ul形式的时候。排不下的li应当自动换到下一行。当然也可以手动控制。如下：1234567891011 media(max-width:800px){.result{width:33%;}}1 media(max-width:400px){.result{width:50%;}}在屏幕宽度小于400的时候。每个结果就占50%。这样就排成两行了。这也是一种常用的办法。但是在我们这个例子。如果数字比较小。在iphone6 375px的屏幕上还是排得下的。如果能保持在一行相对比较美观。而且固定50%。如果当数字比较大时也有可能会有重叠的危险。这个也有办法。就是别写死宽度。而是写死min-width为50%。这样当内容比较长时。float的元素同一行排不下就会自动换行。但是知名还是要个办法让它能根据内容长度自动换行。当然可以用JS计算。但是有点麻烦。这个时候flex就派上用场了。很简单。只要设置两个属性：12345.result-container{display:flex;justify-content:space-between;flex-wrap:wrap;}

space-between让子元素挨着容器的两边等间距排列。而wrap属性让子元素自动换行。当容器宽度不够的时候。就有了以下的效果：