Long long ago…
后面通常会紧接一个跌荡起伏，错综复杂，深刻细腻的故事。
就像我写出第一个响应式页面的心路历程一般。
当我看到一个页面长成这样，以前我会以为就像画画一样简单，把哪个块画在哪，上什么色，按何种比例构造，想加什么描述就加什么，只要看起来形象生动，文图相配就成。多么简单的一件小事……
一个前端的响应式页面，它需要考虑的细节很多：
一，首先要考虑到它适配在哪些客户端，拿到的设计搞是否可行以及合理就很关键了
上面两张图片，是一个响应式页面的logo区和slogan导航条区与banner主题说明区，需要理解各部分在客户端呈现的意义是什么，我起初是一脸懵的，这需要经验以及该项目所要呈现的内容，圆形部分被认为是logo呈现，那么就需要一张logo图，图片由方形切成圆形
slogan在屏宽改变时，由一两行变成一行，用列表会比较容易实现这一块区域，对每一行列表 设置 min-width,当屏宽不够，自然就会跳转成两行排列
inline-block元素的居中，包括内容的垂直居中与它本身位置的居中可以用下面几条实现
而内联元素的水平居中，一般在父元素里设置
好了，logo区终于初步完成，后面只需要填充内容进去就可以了，下面，真正难以实现的块就是主题说明的一行两行随心变了，我下意只以为跟slogan会一样，不够宽自己就跳转了嘛，但是很难所想即所得，它只有一个主题，就一行区域，要不够也太难了点，而且它不是本来就几块内容，而是一块内容在手机屏显示不够才变成两块内容，一个神奇的属性就出现了，叫display的小朋友，既然你内容一样，我就建两部分一样的内容好了，一部分只有一行，一部分是两行，只是一行的内容分布在两行里，超过多少屏宽，我就让两行这一部分display:none;而另一部分display:block;逻辑简单，不过很难想到，就会多做一些无用功，再一次说明，多写，多练才能有解决问题的合理思维，代码块如下
二，这里引入了一个很重要的样式，响应式页面的精髓@media(至少在我目前所学的知识水平是这样认识的)
好了，这一块的难点也算是解决了，最后我们就是要对主要内容区products进行布局了，看起来虽然占的页面比例大，但是结构单一，做起来并不算太复杂，好吧，这只是我初步判断，但是一旦填充图片的时候，让我无论如何也舒服不起来，如果图片只用div块的样式写出来，倒是没发现，一旦用img元素填充后，问题一大堆一大堆滴。
首先我是网络找图，宽高比例都不一致，很难在不限制高度的情况下，让它们排成整齐的一排，图片宽度一般用max-width:100%;样式就可以实现随着屏宽改变自适应，不会出现很难看的界面，但是高如果不限定绝对值，就会把下一排的元素往下挤，最后整个页面会相当uncomfortable，尤其在宽屏一排显示多张图时。在网络上搜了不少建议，都不大能理解，难道只能由设计师给我们设计好同样比例的图填充进去才能解决？
产品区，同样也引入@media来解决响应式页面屏宽改变的显示效果
写样式前的设计搞是这样的
手机
平板
电脑
整个页面的自适应也是按照这几种客户端来分类写的。
三，写这样的页面，如果全都加上box-sizing:border-box;代码会更清晰些。会省去对诸多块的padding，margin的加加减减，这样减少出错的机会，默认width,height是content-box的宽高，一般两个block元素margin会重叠，而inline-block元素margin是不重叠的.
content-box ，默认值，标准盒子模型。width与height只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。
border-box
width和height属性包括内容，填充和边框，但不包括边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如,.box {width: 350px; border: 10px solid black;}导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。
这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。
而在对block元素设置居中的时候，它的宽高明确也是很重要的一点，如果只要水平居中的话，就设置margin-left:auto;margin-right:auto;这是块级元素包含块级元素的方式。块元素垂直居中的设置也可直接上下margin或padding。内联元素的垂直居中，需要明确height=line-height。
总之，对页面整体把握不够，不熟悉，显得顾头不顾尾，需要学习的地方还有太多了，做一个静态页面也许不难，但是如果不做响应式布局，那就 OUT了，加油吧，尤其是移动端的用户越来越取代pc端，那响应式页面的掌握程度就直接影响了生产力呀，熟能生巧，熟能生巧……
网友评论