网站设计吧 关注:130,901贴子:427,724
  • 7回复贴,共1

Responsive Design响应式网站设计心得笔记

只看楼主收藏回复

这个词已经喊了很久了,一直都是小打小闹,没正经的做过大的响应式全站,这次终于有机会了。网站刚上线半个月,就要改版为响应式设计,支持手机/PC等各类终端显示浏览。今天把首页做好,并测试无误,这里把一些应该记录的东西写下来,一是备忘,二是分享给需要的人


1楼2016-07-14 10:29回复
    一、对不支持html5标签的IE,可以使用类似html5 shiv的插件(地址http://html5shim.googlecode.com/svn/trunk/html5.js)也可以自己使用javascript 的createElement将这些不支持的标签创建一次,记得在CSS里要批量声明一下这些Html5标签为block类型,防止一些情况下IE不识别这些html5标签下的CSS样式。


    3楼2016-07-14 10:29
    回复
      二、响应式设计要尽量使用百分比宽度,以适应不同设备的显示需求。对于字体大小,为了对小屏幕手机设备写media query时候维护方便,请结合像素单位px并适当使用相对单位,虽然CSS3新增的相对单位rem(root em)比较灵活方便,但由于IE8和之前低版本不支持,所以目前来说,还是建议使用em,用到的地方自己就不要怕麻烦,多计算一下吧。


      4楼2016-07-14 10:29
      回复
        三、让IE支持媒体设备查询,可以使用MediaQueries.js和Respond.js,当然,如果你有时间和能力,自己去写的话,那就更有针对性啦。这里只是说明一下,在使用MediaQueries.js时候,对于结构稍微复杂或者使用定位position不当会造成IE下不生效,或者显示有问题,这时可以尝试以下方法排查一下:


        5楼2016-07-14 10:29
        回复
          3)必要时,响应式设计利器CSS3 media query和IE条件注释一起使用,为了表现一致或IE的向下兼容,这又是一个好的配合。强调一点,有些代码只让标准浏览器认识,而在IE中不生效,可以使用IE条件注释,但注意写法。你可能会觉得很简单:
          <!--[if !IE]> 我不是 IE<![endif]-->
          其实,错了!因为非IE浏览器根本不会识别IE私有的条件注释语句。
          正确的写法应该是:
          <!--[if !IE]><-->
          只有非IE浏览器才能看到我
          <![endif]-->


          6楼2016-07-14 10:30
          回复
            这里的关键是条件注释后头的 <--> ,IE和其他标准浏览器对此的解析不一样的。
            在IE中被当作内部注释,而在非IE浏览器中会与之前的<!--形成注释闭合标签,从而起到区别非IE浏览器和IE的作用,一般也常用<!–>。


            7楼2016-07-14 10:30
            回复
              四、关于png24和png8图片格式的问题。如果有半透明效果,选择png24当然抗锯齿,图像质量是最有保证的,但是对头疼的IE6还得单独处理,这就要看页面里涉及的元素有多少,再综合图片大小,页面大小,加载性能综合考虑是否采用PNG24。我的建议是能通过png8图片实现的尽量采用png8图片,必要时候可以加入杂边(PhontShop保存时的选项)。而不得已时需要使用png24来实现才使用。关于IE6下PNG24的处理可以使用类似jquery.pngFix.pack.js这样的插件,也可以使用IE的私有滤镜,使用filter:AlphaImageLoader滤镜的层一定要hasLayout,否则不能显示透明滤镜效果。注意私有滤镜会影响页面的性能,谨慎使用。


              8楼2016-07-14 10:30
              回复
                说明:在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
                PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。


                9楼2016-07-14 10:31
                回复