响应式设计为什么要求缩略图比例尺寸相同

Web前端158.2K阅读模式
摘要响应式主题模板目前大行其道,最大的好处就是一套模板能够兼容多个终端,而无需为不同的终端做特定的主题模板,个人认为这是未来移动互联网浏览最佳解决方案,而不是将网站转化成APP,没人喜...

目前国内各大门户网站,因改版成本较大,一直推荐移动用户安装APP浏览,不过可能又带来更大的维护成本。

又比如,两大手机品牌小米魅族的官网,网页设计简洁大气,很有目前响应式设计的风范,但当仔细看过之后,就会发现只有响应式设计的简洁外观,却非真正响应式设计,一部分原因可能是为兼顾低版本IE用户,另一方面也体现出国内网页设计者的窘态。

本文并非探讨响应式设计,主要针对Begin主题用户纠结的关于缩略图片尺寸必须相同的问题,作出的解释。

作为草根站长的我们,可以完全不顾及低版本IE用户,使用美观大方的响应式主题模板。但响应式设计也会给使用者带来一定的不方便,比如本文的重点:响应式设计为什么要求缩略图比例尺寸相同。

以我目前使用的Begin主题的杂志首页图片模块为例加以说明。

图片模块有两种布局:

第一种,多栏的九宫格布局

当窗口屏幕大于等于1080px时,多栏九宫格的布局,图片高度随宽度自动按比例缩放。

响应式设计为什么要求缩略图比例尺寸相同-图片1

当窗口屏幕等于小于1024px时,缩略图按比例缩小,但仍保持基本多栏布局。

当窗口屏幕等于900px时,侧边栏自动隐藏,此时左侧主体宽度最大,图片也随之按比例有所放大。

第二种,两栏布局

当窗口屏幕继续减小,缩略图会逐渐变小,直至等于小于480px时,图片模块布局变为两栏,此时图片尺寸再次有所放大,并随着窗口的缩小,图片随之变小,但一直保持两栏布局,如下图:

响应式设计为什么要求缩略图比例尺寸相同-图片2

可以在PC机上,逐渐拖小浏览器窗口,查看以上变化。

上述形态的变化都是基于缩略图尺寸比例相同的情况下,当图片比例不同时,在窗口屏幕大于1080px时,看不出有什么变化,因为通过添加CSS样式截断了图片,但当窗口屏幕小于1080px时会是这样的:

响应式设计为什么要求缩略图比例尺寸相同-图片3

此时,叉腰MM霸气突显,一人占了两个位置。

大家会问,这时不能通过CSS添加截断吗?

答案是:不能。

因为此时缩略图大小不是固定的,会随着窗口屏幕的大小,不断改变尺寸,无法确定高度尺寸,也就无法截断了。

另有异想天开的想方,可不可以用JS判断高度从而实现截断?抱歉,还没看到有类似技术推出。

如果有一天,只允许生产几个固定分辨率的移动设备,那是就好办些了,不过可能性不大,呵呵!

所以想完美展现响应式设计的主题模板,必须按设计要求,保证缩略图尺寸比例相同。

文章相关图片模块、图片、视频分类模板与上面相似。

但正常文章列表的缩略图有所不同,不管屏幕如何变化,它只有一大一小两种尺寸,所以可以通过样式截断,而不影响整体布局。

不是解决办法的办法

如不顾及移动设备上错位与否,可以打开Begin主题选项→定制风格,在“输入自定义样式代码”中,添加以下代码:

  1. @media screen and (min-width:999px) {
  2. .related-site-img {
  3. height: 131px;
  4. overflow: hidden;
  5. }
  6. .picture-img {
  7. height: 195px;
  8. overflow: hidden;
  9. }
  10. }

强制在正常PC显示器上(窗口屏幕大于等于999px时),截断文章相关图片和图片及视频分类模板图片,保持布局不错位,但在移动设备小屏幕上,仍然会错位,其中取舍自行决定。

主题可在主题选项中自定义页面宽度,如果你加的宽度很大,上面代码中的高度也需要作相应的修改。

补:有用户说,瀑布流类的图片站点,貌似不要求图片比例。

是的,几年前,瀑布流刚出来时,风靡一时,让人看了很新奇,不过现在瀑布流技术很普及,现成的JS代码,可以比较轻松地实现瀑布流效果。

那Begin主题为什么不采用瀑布流,道理很简单,因为瀑布流设计有它的局限性----虽然图片可以不要求比例大小相同,看上去虽然参差不齐,却错落有致,但页面底部是却是永远不会对齐的,当然如果页面加载较快,你可能看不到底部,因为瀑布流是无底洞。

在Begin主题图片分类布局采用瀑布流是可以的,问题是主题杂志首页也有调用图片类的文章,如果图片尺寸不同,会造成模块底部不齐,很难看,这就是主题为什么不采用瀑布流的原因。

另外,瀑布流设计,缺点也很明显:你可能不停的滑动页面,也找不到之前看过的文章(图片),在同一个页加载全部文章,貌似也不利于SEO,是个很炫也很傻的设计理念。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  15  访客  14  作者  1
    • 清风
      清风 2

      那就将缩略图比例尺寸弄相同就行了,省得折腾其它

      • 黑色理想
        黑色理想 2

        只是每次发表文章的时候 都要处理一下内容图片··就有点麻烦··

        • 湛江大城小事
          湛江大城小事 2

          我的特色图片都是一样尺寸的,不过在文章页面的相关文章模块乱了样式

          • 艾薇资讯
            艾薇资讯 3

            为了避免麻烦,于是我都删除了后面的相关文章图片

            • boke112导航
              boke112导航 5

              为了用户体验,让没一张图片的规格相同还是很有必要的,不要嫌麻烦

              • 阿里书籍
                阿里书籍 5

                我看别人的瀑布流显示不是很好么?

                  • 知更鸟
                    知更鸟

                    @ 阿里书籍 用JS实现的破布流,图片是不用对齐的,不过图片不齐,杂志首页怎么调用图片类文章?

                  • 菠萝格格の博客志
                    菠萝格格の博客志 1

                    都是直接auto 才不管模糊不模糊 ○( ^皿^)っHiahiahia…

                    • 交通事故律师
                      交通事故律师 4

                      我全部都是随机缩略图,不需要搞什么比例

                      • 小鬼哥
                        小鬼哥 0

                        我的博客没那么多图片,就不需要考虑这么多问题了。

                        • fdf
                          fdf 0

                          支持博主,不错

                          • 电缆支架
                            电缆支架 2

                            有些网站里用的瀑布流没有对齐,有些是对齐的,这个看情况,加点代码处理好对齐就行了

                            • 爆实惠
                              爆实惠 1

                              涨姿势,响应式是主流了吧以后 :lol:

                              • MUZI PPT
                                MUZI PPT 0

                                之前也为这个东西头疼,后来学会怎么搞了

                                • 维也纳
                                  维也纳 2

                                  鸟叔,我已经下单了,准备做个博客,现在还没内容,图片的尺寸都按照你博客里的图片尺寸就没问题了吧?我怕影响美观,所以特意来看看图片尺寸和比例。

                                评论已关闭!