使用bootstrap响应式需注意的9个问题

响应式网页设计目前是很受欢迎的布局方式,在操作上和对用户友好体验度上来说绝对是我们的首选,自适应的响应越来越少,在处理兼容,效率上往往都比较麻烦,那作为web前端的我们接下来看一看在引入bootstrap响应式要注意什么呢?

一、自适应网页设计与响应式对比

它们看似乎相同，但有一定区别。这两种方法类似，并没有说哪个是对的那个是不对的，而是内容决定一切。

二、内容流动

现在随着屏幕尺寸变小和种类的增多，内容将会占据更多的空间，而下方的内容就会被接着往下挤，这就是所谓的流动。如果你用像素和磅来进行设计的，这可能会有点麻烦，但是当你习惯熟悉之后，就会变得很顺手了。

三、相对单位

画布大小可以为desktop、mobile也可以是它们之间的任何尺寸。像素密度也可以不同，所以我们需要更为合适的、在各种屏幕上都可以使用的单位。这就是相对单位（如百分比）派上用场的时候了。所以设置50%的宽度也就意味着它会占到屏幕的一半。

四、断点

断点可以布局在预定义的点改变。例如：desktop屏幕上有3列，在mobile上只有一列。大部分CSS属性是可以根据断点做出改变的。一般我们会根据具体的内容来调整断点。加入一个句子宽度大于屏幕宽度，我们可能就需要为它添加一个断点。需要注意的是使用断点的时候需要当心——旦它很难理解什么内容会影响什么内容的时候，它可能会迅速地导致混乱。这一点我们要特别注意

五、max最大值与min最小值

假如内容占据了屏幕的整个宽度是很好的，类似在移动设备上。那么在电视屏幕上，相同的内容，霸占了屏幕全部宽度，看起来就大打折扣了。这就是min/max存在的意义。举个例子，设置width为100%，然后max-width是1000px，那么内容会填满屏幕，但是不会超过1000px。

六、嵌套对象

还记得相对位置吧,让很多元素的位置依靠于父类或者同类元素来定位是很难控制好的，因此使用容器来包裹元素可以让它更易理解，也更简洁。这就是静态单位（比如像素）的作用。对于你不想要模块化的内容（比如logo或按钮），它们是有用的。

七、Mobile优先 还是Desktop优先

从技术上讲，如果一个项目是从一个较小的屏幕开始，变成较大的屏幕（mobile优先），还是反过来（desktop优先），并没有太大的差别。然而它还是增加了额外的条框，可以帮助你决定是否从mobile优先开始。通常大家在一开始的时候都会两端一起写，所以，还是看看哪个运行起来更好。

八、网页字体和系统字体

谁都希望自己的网站看起来酷酷的,我们可以使用网页字体！虽然它们看起来非常棒，但是记住字体放得越多，你加载页面的时间也会越长。在另一方面，加载系统字体的确较快，但要注意的是你本地没有此字体时，它就会返回默认字体。

九、位图和矢量图

你是否想过在图标上添加很多的细节和花哨的效果？如果想过的话，使用位图比较合适。如果没有，建议使用矢量图。对于位图，使用的是jpg、png或gif格式的图像，而对于矢量图，最好的选择是SVG或图标字体。每个都有对应的优势和缺点。但是图片的大小也需要重视——网页上的图片必须经过优化。另一个方面，矢量图通常比较小，但是一些旧版的浏览器支持不是很好。此外，如果有很多曲线的话，它也可能会比位图要重。所以，要选择最合适自己的。