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的使用方法

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

通过设定屏幕的判断条件，调用对应的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文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。

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

自适应设计与响应式设计
目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念. 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网 ...
什么是响应式设计？为什么要做响应式设计？响应式设计的基本原理是什么？(十九）
什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么? 页面的设计和开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包 ...
转自CSDNattilax的专栏：自适应网页设计跟响应式设计的区别跟原理and实践总结...
响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 设计思路Mobile First 2 #---手机and平板分辨率 ...
自适应设计和响应式设计
自适应设计:设计根据多个不同的尺寸设计多个不同的页面,一般会设计到手机端.ipad端.电脑端,开发根据不同的尺寸写好不同的样式,用不同的设备打开同一个网页时,布局差异比较大. 响应式设计:设计出一套页 ...
flex如何做响应式设计_响应式设计-您做错了！
flex如何做响应式设计 Responsive design is not just about the web that automatically adjusts to different scr ...
什么是响应式设计？为什么要做响应式设计？响应式设计的基本原理是什么？...
页面的设计和开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.css media query的使用等.无论用 ...
8、什么是响应式设计？响应式设计的基本原理是什么？如何做？
简介我这么理解:响应式布局就是一个网站能够兼容多个设备,可以根据屏幕的大小自动调整页面的展示方式以及布局,我们不用为每一个设备做一个特定的版本.响应式网站的特点: 同时适配PC+平板+手机等网站的 ...
14.什么是响应式设计？响应式设计的基本原理是什么？如何做？
一.是什么响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整描述 ...
什么是响应式设计？响应式设计的基本原理是什么？如何做
是什么响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整描述响应 ...
面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？
一.是什么响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整描述 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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