您当前的位置:澳门葡京_葡京娱乐网_澳门葡京官网_葡京网址 > 旅游 >

              响应式web网站设计制作方法

              发布时间:2016-03-12 12:54编辑:admin阅读(

                在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。(dede58.com----做最好的织?#25991;?#26495;分享)

                1. ie9以下(不包括ie9)采用ie条件注释,为ie8以及一下单独开一个样式文件

                1 <!--[if lt IE 9]>
                2 <link href="lt9.css" rel="stylesheet" type="text/css">
                3 <![endif]-->

                2. 一个模块的mq样式整体放在这个模块的样式的之后,符合层叠逻辑,也同时以免被层叠。

                3. 祈求在一个相应点上同时做变化几乎是不可能的,因为版式中间的变化,无论是视觉还是具体的编码人员不可能掌握所有细节。

                4. 流体布局很关键,%视父级为?#25569;?#29289;,这一点虽然很多人都知道,但是?#23548;首?#30340;时候却最容易被忽略。

                5. 清除浮动也很重要,切记。

                6. 如果你希望边框、边距(内、外)也在100%的范围内,直接设置width:auto就好了,不要给予希望在新的css3属性?#24076;?#20063;不要寄希望在-webkit?#24076;?webkit-很容易就会变成下一个ie6了。

                7. 合理的嵌套更加健壮,用一个包装元素来替代设置当前元素margin或者padding。举例,假如有A和B两个元素,width是40%,maring-right是10%,这样很容易在搜索浏览器的时候篡位,所以用一个包装元素C去分别包裹A和B,然给给C设置50%,A和B分别设置为80%。这样就是合理且健壮的嵌套了。

                8. 两行两列这种设计,由于流体布局和字数的不同,所以为每一行添加一个包装元素,更加健壮。也就是说,先做两行,再在每一行里做两列。

                9. 不要奢望在在每一个像素的宽度上不会出现超出预期的表现,因为没有任何人知道页面在每一个像素宽度时候的表现的样子,页面越负责可预期的就越不准确。所以mq可能真的是“非预期数值”(预期数值?#22797;?#22312;设计和实现之前?#32423;?#30340;响应点)

                10. 相同区间的mq和mq会层叠,全局的样式?#19981;?#21644;mq中的样式层叠,所以属性尽量不要写成缩写。以减少忘记的风险。

                11. ?#35745;?#30340;自适应处理不容易,特别是有边框的,如果正常条件(没有利用mq来?#38469;?#19979;设置了宽和高,在另外一个mq下,仅仅设置一个属性是不行的,还是那句话,mq不是二选一(除非是两个不同的mq区间),而是层叠!!

                12. 如果水平列表的两端的元素两端对齐,以四个元素为例,那么除了前三个预留左边距,最后一个为零;或者第一个右边据为0;后三个有右边距以外。可以采用第一个左侧有,最后一个?#20063;?#26377;,中间两个左右偏移边距来做,短的一面为 边距除以空白数,比如4个列表项,边距为40,则40除以3。好处么?就是可以保证每一个外包装为通栏的25%。

                13. 四个25%,两个50% ?#36824;?#31995;,但是50% 25% 25%就可能会掉下去最后一个,所以24.99,22.49有时还会相差1~2像素。

                14. 如果版式变化不大,那么从大到小的写mq,不必写一个区间,只写最大?#23548;?#21487;,这样一层一层的继承,小尺寸继承大尺寸,另外,不用过分担心选择器本身权重的问题,mq会提高其优先级。

                15. 像导航和版权这种在pc、pad、phone截然不同的版式。mq,就写区间。这样在区间外就等于这些dom毫无样式,这样就不比担心由继承引发的覆盖、优先级、重写以及未知问题。减少了属性的重写,提高了效率、降低了修改成?#23613;?#20854;实就是等于一个dom,为不同的设?#24863;?#19981;同的样式,这些样式之间不继?#23567;?/p>

                16. 如果你希望几个元素是相对位置不变的话,请将他?#21069;?#35065;,通过这个包裹元素使他们整体与其他元素或元素组做排版,所以一个健壮的响应式离不开这些看似“冗余”的包裹元素。但还是以最少的可实现目标的dom层级为目标。

                17. 关于背景图,以中心为原点进行“裁剪”是理智的,已某一侧为原点看起来都有点怪。另外可以使用background-size某个值为auto,另外一个使用%

                18. 大?#35745;?#35831;写在一个mq区间内,不要只写最大值,这样会搞定按需加载的问题。

                19. banner样式?#23548;?/p>

                01 @media (min-width:1110px){
                02 .banner{height:684pxbackground:url(img/banner1980.jpg) center center no-repeat; background-size:auto 100%;}
                03 }/*高度一直填充,两侧裁剪,这种体验先看比较好*/
                04 /*以下不同目标分辨率载入不同的?#35745;?#20445;证k数最佳,裁剪体验应该一致*/
                05 @media (min-width:769px) and (max-width:1110px){
                06 .banner{height:383pxbackground:url(img/banner1110.jpg) center center;}
                07 }
                08 @media (min-width:569px) and (max-width:768px){
                09 .banner{height:265pxbackground:url(img/banner768.jpg) center center;}
                10 }
                11 @media (min-width:415px) and (max-width:568px){
                12 .banner{height:196pxbackground:url(img/banner568.jpg) center center;}
                13 }
                14 @media (min-width:321px) and (max-width:414px){
                15 .banner{height:143pxbackground:url(img/banner414.jpg) center center;}
                16 }
                17 @media (max-width:320px){
                18 .banner{height:111pxbackground:url(img/banner320.jpg) center center;}
                19 }

                20. logo如果是在banner的背景图上镂空,这样是不推荐的。在缩小浏览器窗口宽度的时候,给人以很明显很明显的视觉差,感觉页面极其不健壮(至少我的感觉是这样),似乎有随时要散的感觉。文字也有这感觉,特别是有大量文字的时候。所以你会发现很多响应式好的网站,他的导航的底色都是?#21487;ogo和导航都不镂空在一张背景图上。?#27604;?#20063;有少数在的,比如adobe。

                21. 接20,一般banner?#35745;?#20960;乎是满屏的可能高达1980px;而一般如果是居中的话,我?#21069;?#23548;航和logo以及一些小功能,比如登录、搜索控制在1200px最大宽度,当页面大于这个最大宽度的时候,这个区域就像钉在了背景图?#24076;?#19981;会导致有两个图层的感觉。所以当页面宽度马上等于最大宽度的时候,我们在利用mq重新写定义下一这个区域的最大宽度,?#27604;?#26159;该小一点,这样就解决了20出现的那个问题。

                22. png8的问题,ie6下就用?#21487;?#20570;?#35013;傘?#25105;最理想的想法是,当用ie6?#26790;?#25152;有公司web产品的时候,给用户一个页面,先登录QQ帐号,然后下载最新的QQ浏览器,然后发这个用户10个Q币。然后浏览器界就清静了。

                23. 接21,当前mq中的这个区域的最大宽度等于下一个(更小的一个尺寸)mq的尺寸,这样就用户的钉在了背景图的上面了。

                24. ?#26434;?#30456;同的一些元素,某一个有特殊的样式,优先使用nth-of-type选择器。在测试ie8以及一下的时候,再为这个特殊的dom添加一个class之类,然后再在那个ie8以及一下的样式表中书写复制响应的规则。

                25. body下有一个包裹元素,作为整体弹性的?#25569;眨?#20026;ie6、ie7单独写一个宽度,为什么是1000px,由于很难获得使用ie6的用户的分辨率,或者说获取了之后可能因为数据繁多不好决策,所以简单?#30452;?#35748;为使用ie6的都是低端设备用户,是小显示器用户,是1024*768分辨率;至于ie7,设置了4个25%的浮动,在缩小浏览器的过?#35752;?#37117;能时不时的掉下去一个,?#26434;?#23567;数点的像素就自动向上补全,太悲哀了。所以如下:

                1 regular css file
                2 .layout{width:100%max-width:1980pxmin-width:320px;*zoom:1margin:0 auto;}
                3  
                4 lt9 css file
                5 .layout{*width:1000pxmin-width:1000px;}/*ie8的最小宽度为1000px,ie7 6只有1000px*/

                26. ?#26434;?#19968;定要百分之百通栏的模块,比如,带有背景色的版权,或者banner,那么可以在lt9的文件夹里为ie7 6写一个不是只有1000px,而是可以100%的样式,但是切记这里只要有一列,否则就又产生了25中提到的问题,也许,你可以这么写:

                1 lt9 css file
                2 .layout{*width:1000pxmin-width:1000px;}/*ie8的最小宽度为1000px,ie7 6只有1000px*/
                3 .one-percent{width:100%;}/*?#30053;?#30340;,一定要在layout的后面,否则?#26434;趇e6 7不生效*/
                4  
                5 html dom
                6 <div class="layout one-percent">
                7 <!--code-->
                8 </div>

                所以我建议,把banner 主体部分 版权 三者用三个layout包裹,这样便于对ie6 ie7 ie8做样式。

                27. 经过长达半年的?#20013;?#32479;计,1366px用户最多,根据栅格化,n=24为基准,得出W=(A*n)-i,所以如果要设置最大宽度则设置为1310px;a=45px,i=10px;不过由于与门户和电商等网站的排版不同且主要为了弹性版式,所以这里最大宽度是我们所需要的,至于45px和10px,以后有固定版式的话可以使用。

                28. 响应点:1366px 1200px 1110px 768px 568px 414px 320px;768以下的很好理解也方便?#38469;琍C侧的响应点是较难控制的,所以前面三个值基本都?#21069;?#29031;版式来操作的。原因参见3。

                29. 有的人说写响应式?#26377;?#24448;大写,意思是说先写?#21482;?#31471;,然后写PC端,大致的原因是从大往小写的话,?#21482;?#23601;要层叠和重写很多样式,可能会影响?#38405;堋?#29702;论?#24076;?#25105;是赞成的,?#23548;?#19978;?#20063;?#27809;有测试过到底?#38405;?#26377;多么影响。但是单单从布局的?#23884;?#19978;讲,从设计的?#23884;?#19978;讲,至少我的逻辑是从大往小写,因为小的基本都是在大的基础上做删减和布局的变化,所以写的时候逻辑比较顺畅。不过无论从大到小,还是?#26377;?#21040;大,?#32422;?#39034;手就好。一般视觉都会先设计PC的,然后考虑mobile是什么样的,这一点也使得我是从大到小的去写。

                30. 之前黄老师问我,认为响应式的难点是在设计上还是在?#38469;跎希?#25105;当时说是?#38469;?#19978;没什么,关键?#21069;?#24335;的变化和设计的体验。现在想想。版式变化固然是难点,但是?#38469;?#25163;段也很重要,在这方面的深度和方式的选择要比版式上的选择复杂的多。

                31. 响应式三大?#38469;酰?#27969;体、mq、弹性?#35745;?/p>

                以上都是个人经验,难免片面,欢迎讨论。

              网上玩江苏快3是骗局吗

                                      竞彩篮球大小分范围 超级大乐透中奖规则 排列5中2个号有奖吗 彩客网专家足彩妖刀 广东11选5官方开奖 黑龙江十一选五玩法走势图 6个蓝球4个红球 河南11选5开奖直播玩法 广东十一选五软件 陕西兴平特级辣椒面 彩票开奖北京28 顶呱刮blue 中国体彩网篮球 江西多乐彩彩彩乐 黑白小姐第二季主题曲