paip.自适应网页设计 跟 响应式 设计方法与工具补充（2）o54

paip.自适应网页设计 跟 响应式 设计方法与工具补充（2）o54





#-----响应式 设计框架

Bootstrap比较热门.

Foundation

号称是世界上最先进的响应式前端框架。

#---绝对不要使用相对地高度...只使用相对地宽度..特别大的布局上...



#----------字体的自适应vw

使用em好像不生效...

使用vw走ok....  font-size: 4vw;   适合320*480-----600*900等...



顺便,要有个vmin,最小字体了.贝儿.太小李看不见..



手动大小窗口,都能自己适合了..



作者 老哇的爪子 Attilax 艾龙，  EMAIL:1466519819@qq.com

转载请注明来源： http://blog.csdn.net/attilax



#---------响应式设计的工具ff29

web tool里面有个响应式设计的工具,能调整web界面大小..通常的320*480-----600*900等都有..轻松的...



贝儿就要外面儿套个边框了....



#----media query的使用方法



一、判断媒体类型，引用不同的样式表



<link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调用的样式表文件” />



通过设定屏幕的判断条件，调用对应的css文件。该实例多用于整页面不同风格的css调用与选取，使用该方法可能需要为一个页面制作多份个css文件。



二、判断媒体类型，执行不同的css样式属性

@media screen and (max-width:240px){



.box{width:200px;}



.title{color:red;}



}

@media screen  and (min-width: 355px) and (max-width:400px)

{}



上述实例可以出现在外部样式表与内部样式表中。直接在样式表中以@media screen属性标注媒体类型的判断事件，



@media screen and (min-width:1200px)







#------------响应式图片：

响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。