你必须像水那样无形：当你把水倒进杯子中，水就变成了杯子的形状；当你把水倒进瓶子中，水就变成了瓶子的形状；当你把水倒进茶壶中，水就变成了茶壶的形状。 — 李小龙
之前读《响应式Web设计实践》，这大概是我印象最深的一句话了。李小龙的功夫了得，可他的功夫哲学更是令人叹服。如今的前端，面临着更多的挑战，尺寸大小不一的设备涌现出来，就像形状各异的容器，而我们的网页必须像水一般， 能够接受各式各样的考验。...
分类：
其他好文 时间：
2016-05-18 18:35:56
阅读次数：
301
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案，但从印刷的角度来看，其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸，没有任何物理 限制，让人感到无从下手。随着建立网站可用的各种小工具越来越多，像素设计局限于桌面和移动端也已经成为历史。因此，现在就让我们来说明一下如何运用响应 式W ...
分类：
Web程序 时间：
2016-05-10 09:52:23
阅读次数：
217
开始研究响应式web设计，CSS3 Media Queries是入门。 Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。 那么，Media Queries是如何工作的？ ...
分类：
Web程序 时间：
2016-04-30 12:48:19
阅读次数：
211
第12章 CSS页面布局 网页布局的类型： 固定宽度。不管浏览器窗口的宽度多大，网页内容的宽度始终保持不变。 流式。流式设计采用百分比，它会根据浏览器的宽度（无论有多宽）自动进行调整。网页会随着访问者调整浏览器窗口的大小而变宽或变窄。 响应式Web设计（Responsive Web Degin，RW ...
分类：
Web程序 时间：
2016-03-26 18:44:56
阅读次数：
256
1、常见浏览器窗口的尺寸断点：960px 1024px 1280px 1366px 1440px 1680px 2、 @media screen and (max-width:960px) // 960px 以下尺寸 @media screen and (min-width:961px) and (
分类：
Web程序 时间：
2016-02-20 09:17:07
阅读次数：
195
随着3G的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1像素以上（目前主流宽度是1366×768），有的还达到
分类：
Web程序 时间：
2016-02-18 21:20:01
阅读次数：
315
在之前一篇译文中，我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题，我们将从前文介绍过的"弹性布局结构"这方面出发，通过一个具体的实例来深入学习。如今的屏幕分辨率，小至320px（iPhone），大到2560px甚至更高（大显示器），变化范围极大。除了使用传统的台式机，...
分类：
Web程序 时间：
2016-01-13 23:44:49
阅读次数：
446
css014 响应式web设计一、 响应式web设计基础知识1、rwd的三大理念：a、用于布局的弹性网络， b、用于图片和视频的弹性媒体，c、为不同屏幕宽度创建的不同样式的css媒体查询。二、 为RWD构建网页1、 手机浏览器中为了忽略手机浏览器屏幕变小字体也变小的行为，可在head中添加一行代码：...
分类：
Web程序 时间：
2016-01-08 00:12:09
阅读次数：
290
基于浮动的布局：1、除非图片设置了宽度，否则始终应该要对浮动的图片设置一个宽度，这样可以让浏览器给其他内容腾出环绕的空间2、当侧边栏的高度与主内容区的高度不一致的时候，可以用个margin进行调整3、在一个非浮动元素中存在一个浮动元素，当浮动元素高于元素本身的时候，内容就会溢出中，解决方案如下：A：...
分类：
Web程序 时间：
2016-01-04 23:52:26
阅读次数：
526
开始研究响应式web设计，CSS3 Media Queries是入门。Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。那么，Media Queries是如何工作的？两种方...
分类：
Web程序 时间：
2015-12-24 10:30:24
阅读次数：
143
