响应式web设计视图工具及插件总结----20150113

响应式web设计可以说火不火是迟早的,下面就对于最开始的视口调试的方法汇总,希望有好的方法大家一起交流。

1.火狐:
从Firefox升级到29.0之后就不直接支持Firesizer了。

先安装Add-on,然后就能使用Firesizer。

Add-on的下载地址是https://addons.mozilla.org/en-US/firefox/addon/the-addon-bar/

然后右下角就可以调试屏幕大小了。

提示:本人安装的35.0.1,在菜单下面的开发者选项中有响应式设计视图,这个其实和插件的功能是类似的。

2.谷歌:
1.进入扩展程序界面:菜单->更多工具->扩展程序
2.将下载好的Window_Resizer_1.1.crx文件直接拖入扩展界面,然后则可以安装。
3.或者在此地址下下载
http://chrome.ionut-botizan.net/window-resizer/
然后crx文件可直接安装,zip离线包需要解压然后把解压的文件拖到扩展中心界面

补充:
http://blog.csdn.net/matraxa/article/details/39836159

3.IE
通过插件IEDevToolBarSetup来实现,在工具里面,重新调整大小,既可以对屏幕大小进行调整。

4.safari

Resize收费就没搞,地址http://resizesafari.com/
resizeme虽然免费,下载居然还要注册,太麻烦就不搞了。

5.通用解决法A:

第三方软件 Sizer | Window Resizer

5.1 Sizer的下载地址
http://www.brianapps.net/sizer/
使用:1.在之前设置好需要的视口大小,然后确认之后则隐藏在后台。
2.测试了三个浏览器,在Firefox和Google上可用,360不可用。右击最上方的空白处,则可看到扩展的插件。

5.2 Window Resizer下载地址(这个软件是德语的,不过界面简单,相信你研究一下就能上手)
http://www.joerg-rosenthal.com/en/resize/download.html

这两款软件均可以帮助你将你指定的浏览器窗口设定到你需要的大小。

6.
http://benfrain.com/easily-display-the-viewport-size-of-your-page-for-responsive-designs/

最后添加上资源链接:http://yunpan.cn/cKaJh5diLJ9Ev  访问密码 4dba

时间: 2024-11-28 19:19:39

响应式web设计视图工具及插件总结----20150113的相关文章

响应式WEB设计

响应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有 任何物理限制,让人感到无从下手.随着建立网站可用的各种小工具越来越多,像素设计局限于桌面和移动端也已经成为历史.因此,现在就让我们来说明一下如何 运用响应式Web设计的各项基本原则来实现,而不是抗拒流畅的网页体验.为了简单起见,我们将着重讲布局(当然,响应式设计远远不止于此,如果你想进一步 学习,可以来这里:bradfrost.com). 响应式设计 vs

十大响应式Web设计框架

http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意一环节都不容忽视.时下,借助网上的一些资源,只需简单的几个步骤你就可创建出更具吸引力的设计,包括菜单.背景.动画.眉头.body等设计.响应式Web设计不仅能够适用于任何屏幕尺寸,还为用户带来更完美的体验,本文将分享十款最佳的响应式Web设计,助你大大简化工作流程. Gumby Framework

响应式Web设计的9项基本原则

响应式web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理限制,让人感到无从下手.随着建立网站可用的各种小工具越来越多,像素设计局限于桌面和移动端也已经成为历史.因此,现在就让我们来说明一下如何运用响应式web设计的各项基本原则来实现,而不是抗拒流畅的网页体验.为了简单起见,我们将着重讲布局(当然,响应式设计远远不止于此,如果你想进一步学习,可以点击此处). 响应式设计vs适应式设计 看似相同实则不然.这两种

响应式Web设计(Responsive Web design)

中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 面对不同分辨率设备灵活性强等         页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动

响应式 Web 设计应该避免的错误

英文原文:Mistakes to Avoid With Responsive Web Design By Ramya Raju 当下,尤其是几乎人人都有一台智能手机或者平板电脑的时候,开发手机端用户体验友好的网站的重要性不言而喻.其结果是,企业所有者会因为这样的交互 网站设计能够给不同平台下(桌面端到手机端到平板电脑)的用户带来不一般的体验而去触碰交互式web设计这一想法.开发一个带有响应式交互设计的网站变得 非常有意义,因为其可以在不同的设备运行,因此,你可以节约针对不同平台开发不同网站的成本

响应式web设计与CSS3媒体查询

在之前一篇译文中,我们了解了响应式Web设计的概念.组成要素以及基本的实现思路.今天继续相关话题,我们将从前文介绍过的"弹性布局结构"这方面出发,通过一个具体的实例来深入学习. 如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况下,固定宽度的设计方案将会显得越发不合理.页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行

【01】《响应式Web设计:HTML5和CSS3实战》

[01] (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(非扫描版)(全).pdf 共246页. 2013年1月出版. 读后感:适合入门的书籍,对于响应式布局,用了一个例子来讲解.后半部分讲了一些CSS3的新属性.阴影,transform,transition等. [英]ben frain 著 王永强 译

css014 响应式web设计

css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. 二.    为RWD构建网页 1.            手机浏览器中为了忽略手机浏览器屏幕变小字体也变小的行为,可在head中添加一行代码: <meta name="viewport" content="width=vedice-width"> 最好是添加

CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 3.在一个非浮动元素<div>中存在一个浮动元素,当浮动元素高于元素本身的时候,内容就会溢出<div>中,解决方案如下: A:在</div>介绍之前添加一个换行,并且添加一个类<br class=”clear”/>,之后创建一个样式br.class{clear