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


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

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

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

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

    1)将本地页面相关文件上传到服务器端,再进行测试预览。

    2)将body元素进行定位,如设置为position:relative;这一招可以解决一些正常页面在添加了mediaqueries.js后显示反而错乱的问题,比如最经常遇到的IE7下某些元素显示为白板,不能点选。

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

    写法用例如下:

    #logo_top{display:block; float:left;  295px; height: 39px; background: url("../images/logo_top.png") no-repeat 0 0; 
    _background:none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled='true', sizingMethod='scale', src='../static/images/logo_top.png');
    }

    这里要注意图片路径是相对于html页面来说的,不是css文件。而且要先使用IE6 专有的下划线hack对IE6去除CSS background,这样也能保证不影响到IE7+的性能,防止页面太重,出现假死现象。

    再重温一下IE私有滤镜的语法:
    filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled= bEnabled , sizingMethod= sSize , src= sURL )
    属性:
    enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
    true : 默认值。滤镜激活。
    false : 滤镜被禁止。
    sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
    crop : 剪切图片以适应对象尺寸。
    image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
    scale : 缩放图片以适应对象的尺寸边界。
    src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
    特性:
    Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
    sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。
    src : 可读写。字符串(String)。参阅 src 属性。
    说明:
    在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
    PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
    示例:
    #idDiv{position:absolute; left:140px;height:400;400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rain1977.gif',sizingMethod='scale');}
    .dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif');}

    P.S. 当想使用backgroundimage属性时,如果不想让图片原尺寸显示,而是类似于IMG width=100% heigth=100% 的效果,可以通过此filter实现。

    Example:
    span.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.jpg', sizingMethod='scale')";


    以上是官方的说明。事实上实际操作中需要注意:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,一般的解决办法是为链接或按钮添加:position:relative使其相对浮动。要注意的是,当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议使用浮动办法处理。

    使用IE私有滤镜的优缺点如何?

    优点:
    1、绿色无插件;
    2、相对插件来说效率高;
    3、网速慢的时候,不会出现先灰底再透明的情况,支持远程图片;
    4、支持Hover等伪类,但是得使用两张图片,网速慢的情况下,会导致第二张图片暂时无法显示,因为还没有完全载入;

    缺点:
    1、不支持平铺,虽然filter有sizingMethod="scale", 拉伸缩放模式,但是图片会变形,如果单纯的颜色或简单的渐变色可以横向平铺;
    2、不支持Img标签,只能写在CSS background中;
    3、不支持CSS Sprite,如果页面图片多,这又增加了请求次数;
    4、AlphaImageLoader是缓慢的,它需要更多的内存,大量使用的话,会造成页面性能严重下降;内存消耗使用ProcessExplorer来测量。

    今天太晚了,要下班去吃饭了。今天就写这么多,感觉还有的问题没说全面,下次接着说。

    推荐文章阅读:

    图片优化 第五章:AlphaImageLoader http://s5s5.me/2286

    Microsoft CSS Vendor Extensions http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

    [译]IE6终极备忘单:修复IE6下 25+ Bugs  http://bbs.blueidea.com/forum.php?mod=viewthread&tid=2965546


  • 相关阅读:
    值类型、引用类型作为方法参数如何执行,ref与out的区别
    asp.net 常用 验证正则表达式
    ASP.NET的错误处理机制
    MSSQL与MYSQL区别
    http协议状态码对照表
    EF 跨数据库支持
    请求管道中的19个事件
    一位软件工程师的6年总结本人读了深受启发,献给所有从事IT开发的人 [转载]
    Windows 窗体的.Net 框架绘图技术
    Windows Live Messenger 8.5 去广告方法及资源文件
  • 原文地址:https://www.cnblogs.com/riasky/p/3483567.html
Copyright © 2020-2023  润新知