响应式web网站设计制作方法
在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。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. 流体布局很关键,%视父级为参照物,这一点虽然很多人都知道,但是实际做的时候却最容易被忽略。5. 清除浮动也很重要,切记。
6. 如果你希望边框、边距(内、外)也在100%的范围内,直接设置width:auto就好了,不要给予希望在新的css3属性上,也不要寄希望在-webkit上,-webkit-很容易就会变成下一个ie6了。7. 合理的嵌套更加健壮,用一个包装元素来替代设置当前元素margin或者padding。举例,假如有A和B两个元素,width是40%,maring-right是10%,这样很容易在搜索浏览器的时候篡位,所以用一个包装元素C去分别包裹A和B,然给给C设置50%,A和B分别设置为80%。这样就是合理且健壮的嵌套了。
8. 两行两列这种设计,由于流体布局和字数的不同,所以为每一行添加一个包装元素,更加健壮。也就是说,先做两行,再在每一行里做两列。
9. 不要奢望在在每一个像素的宽度上不会出现超出预期的表现,因为没有任何人知道页面在每一个像素宽度时候的表现的样子,页面越负责可预期的就越不准确。所以mq可能真的是“非预期数值”(预期数值指代在设计和实现之前约定的响应点)
10. 相同区间的mq和mq会层叠,全局的样式也会和mq中的样式层叠,所以属性尽量不要写成缩写。以减少忘记的风险。
11. 图片的自适应处理不容易,特别是有边框的,如果正常条件(没有利用mq来约束)下设置了宽和高,在另外一个mq下,仅仅设置一个属性是不行的,还是那句话,mq不是二选一(除非是两个不同的mq区间),而是层叠!!
12. 如果水平列表的两端的元素两端对齐,以四个元素为例,那么除了前三个预留左边距,最后一个为零;或者第一个右边据为0;后三个有右边距以外。可以采用第一个左侧有,最后一个右侧有,中间两个左右偏移边距来做,短的一面为 边距除以空白数,比如4个列表项,边距为40,则40除以3。好处么?就是可以保证每一个外包装为通栏的25%。
13. 四个25%,两个50% 没关系,但是50% 25% 25%就可能会掉下去最后一个,所以24.99,22.49有时还会相差1~2像素。
14. 如果版式变化不大,那么从大到小的写mq,不必写一个区间,只写最大值即可,这样一层一层的继承,小尺寸继承大尺寸,另外,不用过分担心选择器本身权重的问题,mq会提高其优先级。
15. 像导航和版权这种在pc、pad、phone截然不同的版式。mq,就写区间。这样在区间外就等于这些dom毫无样式,这样就不比担心由继承引发的覆盖、优先级、重写以及未知问题。减少了属性的重写,提高了效率、降低了修改成本。其实就是等于一个dom,为不同的设备写不同的样式,这些样式之间不继承。
16. 如果你希望几个元素是相对位置不变的话,请将他们包裹,通过这个包裹元素使他们整体与其他元素或元素组做排版,所以一个健壮的响应式离不开这些看似“冗余”的包裹元素。但还是以最少的可实现目标的dom层级为目标。
17. 关于背景图,以中心为原点进行“裁剪”是理智的,已某一侧为原点看起来都有点怪。另外可以使用background-size某个值为auto,另外一个使用%
18. 大图片请写在一个mq区间内,不要只写最大值,这样会搞定按需加载的问题。
19. banner样式实践
01 | @media (min-width:1110px){ |
02 | .banner{height:684px; background:url(img/banner1980.jpg) center center no-repeat; background-size:auto 100%;} |
03 | }/*高度一直填充,两侧裁剪,这种体验先看比较好*/ |
04 | /*以下不同目标分辨率载入不同的图片,保证k数最佳,裁剪体验应该一致*/ |
05 | @media (min-width:769px) and (max-width:1110px){ |
06 | .banner{height:383px; background:url(img/banner1110.jpg) center center;} |
07 | } |
08 | @media (min-width:569px) and (max-width:768px){ |
09 | .banner{height:265px; background:url(img/banner768.jpg) center center;} |
10 | } |
11 | @media (min-width:415px) and (max-width:568px){ |
12 | .banner{height:196px; background:url(img/banner568.jpg) center center;} |
13 | } |
14 | @media (min-width:321px) and (max-width:414px){ |
15 | .banner{height:143px; background:url(img/banner414.jpg) center center;} |
16 | } |
17 | @media (max-width:320px){ |
18 | .banner{height:111px; background:url(img/banner320.jpg) center center;} |
19 | } |
20. logo如果是在banner的背景图上镂空,这样是不推荐的。在缩小浏览器窗口宽度的时候,给人以很明显很明显的视觉差,感觉页面极其不健壮(至少我的感觉是这样),似乎有随时要散的感觉。文字也有这感觉,特别是有大量文字的时候。所以你会发现很多响应式好的网站,他的导航的底色都是纯色。logo和导航都不镂空在一张背景图上。当然也有少数在的,比如adobe。
21. 接20,一般banner图片几乎是满屏的可能高达1980px;而一般如果是居中的话,我们把导航和logo以及一些小功能,比如登录、搜索控制在1200px最大宽度,当页面大于这个最大宽度的时候,这个区域就像钉在了背景图上,不会导致有两个图层的感觉。所以当页面宽度马上等于最大宽度的时候,我们在利用mq重新写定义下一这个区域的最大宽度,当然是该小一点,这样就解决了20出现的那个问题。
22. png8的问题,ie6下就用纯色做底吧。我最理想的想法是,当用ie6访问所有公司web产品的时候,给用户一个页面,先登录QQ帐号,然后下载最新的QQ浏览器,然后发这个用户10个Q币。然后浏览器界就清静了。
23. 接21,当前mq中的这个区域的最大宽度等于下一个(更小的一个尺寸)mq的尺寸,这样就用户的钉在了背景图的上面了。
24. 对于相同的一些元素,某一个有特殊的样式,优先使用nth-of-type选择器。在测试ie8以及一下的时候,再为这个特殊的dom添加一个class之类,然后再在那个ie8以及一下的样式表中书写复制响应的规则。
25. body下有一个包裹元素,作为整体弹性的参照,为ie6、ie7单独写一个宽度,为什么是1000px,由于很难获得使用ie6的用户的分辨率,或者说获取了之后可能因为数据繁多不好决策,所以简单粗暴,认为使用ie6的都是低端设备用户,是小显示器用户,是1024*768分辨率;至于ie7,设置了4个25%的浮动,在缩小浏览器的过程中都能时不时的掉下去一个,对于小数点的像素就自动向上补全,太悲哀了。所以如下:
1 | regular css file |
2 | .layout{width:100%; max-width:1980px; min-width:320px;*zoom:1; margin:0 auto;} |
3 |
4 | lt9 css file |
5 | .layout{*width:1000px; min-width:1000px;}/*ie8的最小宽度为1000px,ie7 6只有1000px*/ |
26. 对于一定要百分之百通栏的模块,比如,带有背景色的版权,或者banner,那么可以在lt9的文件夹里为ie7 6写一个不是只有1000px,而是可以100%的样式,但是切记这里只要有一列,否则就又产生了25中提到的问题,也许,你可以这么写:
1 | lt9 css file |
2 | .layout{*width:1000px; min-width:1000px;}/*ie8的最小宽度为1000px,ie7 6只有1000px*/ |
3 | .one-percent{width:100%;}/*新增的,一定要在layout的后面,否则对于ie6 7不生效*/ |
4 |
5 | html dom |
6 | <div class="layout one-percent"> |
7 | <!--code--> |
8 | </div> |
所以我建议,把banner 主体部分 版权 三者用三个layout包裹,这样便于对ie6 ie7 ie8做样式。
27. 经过长达半年的持续统计,1366px用户最多,根据栅格化,n=24为基准,得出W=(A*n)-i,所以如果要设置最大宽度则设置为1310px;a=45px,i=10px;不过由于与门户和电商等网站的排版不同且主要为了弹性版式,所以这里最大宽度是我们所需要的,至于45px和10px,以后有固定版式的话可以使用。
28. 响应点:1366px 1200px 1110px 768px 568px 414px 320px;768以下的很好理解也方便约束,PC侧的响应点是较难控制的,所以前面三个值基本都是按照版式来操作的。原因参见3。29. 有的人说写响应式从小往大写,意思是说先写手机端,然后写PC端,大致的原因是从大往小写的话,手机就要层叠和重写很多样式,可能会影响性能。理论上,我是赞成的,实际上我并没有测试过到底性能有多么影响。但是单单从布局的角度上讲,从设计的角度上讲,至少我的逻辑是从大往小写,因为小的基本都是在大的基础上做删减和布局的变化,所以写的时候逻辑比较顺畅。不过无论从大到小,还是从小到大,自己顺手就好。一般视觉都会先设计PC的,然后考虑mobile是什么样的,这一点也使得我是从大到小的去写。30. 之前黄老师问我,认为响应式的难点是在设计上还是在技术上,我当时说是技术上没什么,关键是版式的变化和设计的体验。现在想想。版式变化固然是难点,但是技术手段也很重要,在这方面的深度和方式的选择要比版式上的选择复杂的多。
31. 响应式三大技术:流体、mq、弹性图片。
响应式web网站设计制作方法的更多相关文章
- 响应式web布局设计实战总结教程
响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media ...
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- 响应式Web设计 – 布局
写在前面 去年上半年,我开始着手推动项目中响应式设计的落地.以官网优化需求为契机,主动去做了响应式的页面设计,也说服了产品.设计和开发的相关同事一起把它上线落实,但不幸的是,由于各种方面的原因,比如, ...
- 什么是响应式Web设计?怎样进行?
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- 十大响应式Web设计框架
http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意 ...
- 响应式WEB设计
近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...
- 学习之响应式Web设计---一个实例
周末闲来无事,做了一个响应式设计的例子.当然,由此并不能窥见响应式设计真谛之一斑.但,对于初次接触响应设计,对于响应式设计的概念依旧模糊不清的同学来说,或许是个启蒙! 闲语暂且不表,进入正题,这里没有 ...
- HTML5、CSS3与响应式Web设计入门(1)
HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...
- HTML5、CSS3与响应式Web设计入门(2)
HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...
随机推荐
- 简单的c#winform象棋游戏(附带源码)
算法源自网络(网络源码连接:http://www.mycodes.net/161/6659.htm) 整体思路:用二维数组构建棋盘每一个数组元素封装为一个picturebox附带若干属性(例如:棋 ...
- SAP 直营验单
*&---------------------------------------------------------------------* *& Report ZSDR005 ...
- USB_HID读写上位机VC++
在工程属性-->链接器-->添加以下库 open 打开,close 关闭,打开后将获得reader 与writer 的handle,分别进行读写即可 #pragma once #ifdef ...
- react开发环境搭建
---恢复内容开始--- 要想用react,需要安装: 1)babel-sublime: 作用:编译es6,支持ES6, React.js, jsx代码高亮,并对所编译的代码进行高亮显示. 安装步骤: ...
- 如何下架app
因赶数日工期成,偷得浮生半日闲.遂登录iTunes Connect,发现之前做过的小程序,想将其下架,故而有此篇随想.(温馨提示:项目被下架后再次上架该版本,不需要再次经过审核)下面是详情步骤: 1. ...
- 表达式求值(noip2015等价表达式)
题目大意 给一个含字母a的表达式,求n个选项中表达式跟一开始那个等价的有哪些 做法 模拟一个多项式显然难以实现那么我们高兴的找一些素数代入表达式,再随便找一个素数做模表达式求值优先级表 - ( ) + ...
- iOS常用系统信息获取方法
一.手机电量获取,方法二需要导入头文件#import<objc/runtime.h> 方法一.获取电池电量(一般用百分数表示,大家自行处理就好) -(CGFloat)getBatteryQ ...
- JSONArray的应用
从json数组中得到相应java数组,如果要获取java数组中的元素,只需要遍历该数组. /** * 从json数组中得到相应java数组 * JSONArray下的toArray()方法的使用 * ...
- C语言、结构体 定义
C语言允许用户自己建立由 不同类型数据组成的组合型数据结构 成为结构体. struct Student { int num; //学号 ]; //姓名为字符串 char sex; //性别为字符型 i ...
- 【Java EE 学习 71 下】【数据采集系统第三天】【分析答案实体】【删除问题】【删除页面】【删除调查】【清除调查】【打开/关闭调查】
一.分析答案实体 分析答案实体主要涉及到的还是设计上的问题,技术点几乎是没有的.首先需要确定一下答案的格式才能最终确定答案实体中需要有哪些属性. 答案格式的设计是十分重要的,现设计格式如下: 在表单中 ...