湖北设计制作网站公司：响应式开发的心得-湖北网站建设

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

响应式布局是为了解决适配的问题，传统的开发方式是端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就好了。因为它是用的同样，所以它的逻辑交互也只需写一套就好了，缺点是比较重。

传统的手机端适配常见有三种解决方案，种是的布局；第二种是使用全局的，先根据屏幕换算1等于多少个，然后设置标签的-为多少个，屏幕越大，则-越大，然后页面所有的元素的宽高和字体大小都用等比例缩放；第三种是阿里的，这种方案和第二种类似，不同点是页面内容的字体大小是用的，而不是比例缩放的。种需要额外引入一个框架。第三种相对第二种来说应该更合理点，因为正文的字体常用的为14或者16，如果一个页面在这个手机字号是15.5，在另外一个手机又变成了14.9，这样可能会有点奇怪。

而使用响应式布局就不需要进行的换算，下面通过上图的那个例子一步一步地分析怎么做响应式。

1.设置不同分辨率页面两边留白

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

总体的思想是留白要合适，既不能留太多，导致中间内容太窄，也不能让中间的内容显得太大。这个其实和的思想一致，只是你可能要根据你自己的业务特点、用户人群等做不同留白策略。

2.屏幕变小时，一头变窄，另一头不变

当屏幕变小或者浏览器窗口拉小时，中间内容的宽度就不能保持1080，它得跟着变小，而在变小的过程中，往往要保持一边不变，另一边随页面变窄，如下图所示：

右边的结果栏宽度保持不变，左边的表单栏宽度缩小。因为右边一旦就窄不好看了，如果右边变窄，那么字体也要相应缩小，字号一缩小，右边上下留白就变得太大，这样就不美观了，所以只能采取右边保持不动的策略去缩小左边的内容。这种场景比较常见，右边如果是一个头像的话，它也不能跟着缩小，它一缩小高度也要跟着缩小，导致上下太空，所以这种情况也不能动。

3.保持中间留白固定，缩小内容宽度

左栏的宽度变小应该怎么变呢？有一个原则，就是要保持中间的间距固定，而两边的内容宽度相应缩小，如下图所示：

所以就要借助3的，如下所示：

1

2

3

{

:((100%-20)/2)

}

的兼容性10及以上支持，4及以下不支持，所以考虑到不支持的设备，可以简单做个兼容，如下代码所示：

1

2

3

4

{

:48%;

:((100%-20)/2);

}

如果不支持就用48%，这样差别其实不是很大，就是不是很精确。真的需要的话，你可以多写几个媒体查询变得更精确。

4.左右布局变成上下布局

当屏幕拉得很小的时候，左栏已经缩得很小了，再变小就不协调了，所以这个时候要把左右布局改成上下布局，把右边的内容往下面放。因为右栏在大屏的时候是:，所以在中屏的时候覆盖掉这个浮动的属性，变成:就可以了。原本右栏的内容有四行，都比较短，可以考虑把它下面的三行排成一行，即让它们浮动。如下面代码所示：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.-{

:;

:330;

}

1

(-:800){

.-{

:;

:100%;

}

.-.{

:;

:33%;

}

}

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

5.宽度太小时，自动换行

特别是当内容是列表形式的时候，排不下的应当自动换到下一行。当然也可以手动控制，如下：

1

2

3

4

5

6

7

8

9

10

11

(-:800){

.{

:33%;

}

}

1

(-:400){

.{

:50%;

}

}

在屏幕宽度小于400的时候，每个结果就占50%，这样就排成两行了。这也是一种常用的办法，但是在我们这个例子，如果数字比较小，在6375的屏幕上还是排得下的，如果能保持在一行相对比较美观。而且固定50%，如果当数字比较大时也有可能会有重叠的危险，这个也有办法，就是别写死宽度，而是写死-为50%，这样当内容比较长时，的元素同一行排不下就会自动换行。但是知名还是要个办法让它能根据内容长度自动换行，当然可以用计算，但是有点麻烦。

这个时候就派上用场了，很简单，只要设置两个属性：

1

2

3

4

5

.-{

:;

-:-;

-:;

}

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

这样还有一个小问题，就是当内容如果刚刚好占满时，两个项之间就没有间距了，如下图所示：

这样就贴在一起了，由于的-不能指定小的，所以只通过或者的方法，如给元素添加-：

1

2

3

.:(:-){

-:10;

}

效果如下：

这样比贴在一起显示的效果好。

还有从大屏变成成小屏的时候有些字号主要是标题的字号和间距要相应调小，这种变小是阶梯变化的，而不是像一样连续变化，而且这种阶梯一般只要有两个就够了，一个大屏的，一个小屏的。如果你需要做很多阶梯的话，那你的排版很可能有问题。

6.使用响应式图片

如相同的头图，在电脑上需要使用大图，但是手机上面使用小图就好了，不然会造成手机上加载慢浪费流量等问题，一个办法是使用-结合媒体查询，如下所示：

1

2

3

4

5

6

7

.{

-:(//.);

}

(-:500){

-:(//.);

}

这种方法的缺点是对不太友好，因为如果使用标签还可以写个属性。

第二种常用办法是使用的或者标签做响应式图片，这个我在《前端7：加快页面打开速度》已经提到，这里不再重复。

这种响应式图片除了大小屏之外，还可以兼顾视网屏即为2及以上的和普通屏为1的屏幕，即在高的屏幕使用2倍图，而普通屏幕使用1倍图。

7.其它问题处理

有些地方大小屏的排版差异比较大，例如有些内容大屏的时候是挨在一起，而小屏离得比较远，这个时候你可能得重复，写两份的标签，大屏的时候隐藏掉小屏的标签，小屏的时候隐藏掉大屏的标签。并且这种情况不应该是常例，如果你经常要写两套，那说明你这个页面可能不太适合写响应式，还不如直接写两套呢。

还有个问题，有时候你可能要借助/:做大小缩放，但这一定是下策，我们的原则还是要保持字号和间距不变，当屏幕的跨度不是很大的时候。使用的后果是屏幕拉小的时候，内容跟着变小了，但是由于不会造成重排，它占据的高度还是那么大，下面的内容不会跟上来。这样就得手动计算内容的高度。另外如果使用，就和响应式的思想冲突了。如果页面的一部分字号使用了，另一部分字号使用了，这样就不协调了，如果你全部写那就不需要使用响应式开发了。这个时候你可能要想一想，是不是出得有问题。让重新调整。

还有，有时候可能会用到高度的媒体查询，例如在高度小于多少的时候，不能让弹框超出页面的高度；在高度大于多少的时候，让的定位在底部，不然的下面可能会留白。

湖北设计制作网站公司：响应式开发的心得-湖北网站建设

以上就是今天小编就为各位整理的“响应式开发的心得-湖北网站建设”的相关内容！，湖北怡橙科技有限公司2019年创立以网站建设、移动互联网、年度运维服务为核心业务专注于技术开发和建站传播，为所有合作的企业机构贡献全力。想要了解更多“响应式开发的心得-湖北网站建设”的信息，请致电专业商务经理，电话：400-960-5068！