学习响应式设计笔记 laiqun@msn.cnContents1.?问题背景？2.?什么是响应式设计和自适应设计有什么不同？3.?如何创建响应式网站4.?经典设计流程5.?响应式网站的参照设计1.?问题背景？为不同分辨率的设备提供不同的网页，曾经的手机端与PC端分别维护一份代码，显得罗嗦，维护难，功... ...
分类：
其他好文 时间：
2016-05-10 18:22:46
阅读次数：
250
网站建设的设计趋势 响应式网站 网站的访问终端已经实现多平台、多样性，从台式机，笔记本，平板电脑，手机，能够适应不同尺寸显示屏的网页是现在的潮流，页是未来很长一段时间的设计趋势。那么响应式网站就是来解决这个问题的。这种开发方式能保证网页适应不同的分辨率，让网页的诸多要素进行重组，使其无论在什么样的浏 ...
分类：
Web程序 时间：
2016-05-01 06:30:28
阅读次数：
199
当创建一个响应式网站，或让现有的网站变成响应式的，首先要关注的元素的布局。我在建立响应式的网站，总是先创建一个非响应的布局，页面宽度固定大小。如果非响应版本完成得非常不错，我再添加媒体查询（Media Queries）和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个任务。 当你已 ...
分类：
Web程序 时间：
2016-03-24 20:22:56
阅读次数：
284
【译】Responsive Design常用的媒体查询 Web前端 dwqs 2015-04-27 10:58 3,100 人阅读 0评论 （PS:原文写于2012年，本文参照原文作了适当修改，不当之处请指出） 现在Web朝着响应式的趋势发展，媒体查询在创建响应式网站中起到了主要作用。 没有媒体查询
分类：
其他好文 时间：
2016-01-29 11:44:41
阅读次数：
191
如今，一个网站只在桌面屏幕上好看是远远不够的，同时也要在平板电脑和智能手机中能够良好呈现。响应式的网站是指它能够适应客户端的屏幕尺寸，自动响应客户端尺寸变化。在这篇文章中，我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式（Responsive）。1 – 布局 当创建一个响应式网站，或让现有....
分类：
Web程序 时间：
2016-01-13 17:46:18
阅读次数：
175
创建响应式网站1，创建可伸缩图像.photo{max-width:100%;}max-width：100%图像可伸缩，但是大小不会超过本来设定的大小；width：100%，图像也可伸缩，但是如果容器比图像大，图像就会被拉大会变丑。2，创建弹性布局.page{max-width:960px;} 布.....
分类：
Web程序 时间：
2015-12-26 19:41:59
阅读次数：
247
今天解决的一个问题，记录一下，先用文字记录下，有时间再用代码还原下。响应式网站中，导航div包含的点击按钮下方出现菜单，无法控制高度（max-height控制百分比不行），后用js实现。是否不用js可以有更好方法？（之后补充）js代码如下function redirectpage() { //var...
分类：
其他好文 时间：
2015-12-18 06:55:53
阅读次数：
153
响应式网页可以根据浏览设备的不同而灵活的改变尺寸。省去了重新编写网页的麻烦。1.响应式页面的组成：（1）灵活的图像和媒体。（2）灵活的、基于网格的布局，也就是流式布局。（3）媒体查询。2.创建可伸缩图像：对任何想做成可伸缩图像的图像，在HTML的img标签中省略width和height属性，在样式表...
分类：
Web程序 时间：
2015-12-02 00:50:16
阅读次数：
209
自从 Ethan Marcotte创造了这个词(响应式)以来，我们一直在寻找如何真正的设计出一个响应式网站，5年之后人们正式定义并且认可了这个词，我们现在能正确的理解这个词的意义，其旨在创建响应式APPS。问题是：它并不是真正的工具(就像frameworks和effects),它与经验相关。直到几年...
分类：
其他好文 时间：
2015-11-20 19:40:38
阅读次数：
130
在阅读这篇bootstrap2.0与3.0的区别的文章之前，大家一定要先了解什么是响应式网站设计？推荐大家看看这篇"教你快速了解响应式网站设计"。我觉得bootstrap的可视化网页布局是个不错的工具，Bootstrap可视化布局说了，这个工具只适用于bootstrap2.x版本，在新版本的boot...
分类：
其他好文 时间：
2015-11-17 12:45:57
阅读次数：
466
