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端,那响应式页面的掌握程度就直接影响了生产力呀,熟能生巧,熟能生巧……