响应式网站设计的3个基本原理

2014-05-05 分类：响应式网站

响应式网站设计的3个基本原理，你必须掌握，几年前，这是比较容易设计和建立网站。网站比较简单，并在屏幕尺寸变化不大观看在台式机和笔记本电脑。今天接管观众的浏览时间的移动设备，智能手机屏幕，平板手机，平板电脑，你如何正确地确保您的网站上显示整个设备类型和屏幕尺寸？

成都网站制作该解决方案最初是他探索的方式，使网站设计响应，即让他们根据屏幕大小而改变。一个自适应网站设计是使巧用CSS来保证网页在宽屏幕尺寸范围渲染以及 - 而不诉诸URL重定向或动态提供不同的HTML和CSS代码，这取决于用户代理。它不是一个真正的技术或标准，而是一组设计原则有助于实现的结果。

响应式网站设计的3个基本原理

在过去的几年里，许多响应模板，CSS框架和WordPress主题如雨后春笋般涌现。这是，例如，有可能创造一个WordPress的响应网站，而无需编写一行代码。

但是，一个真正的网页设计师并不满足于仅仅使用模板。她会作出努力来理解响应网页设计的元素，为了有效地使用它们。
所以今天，我们要看看你需要掌握三个基本技巧，你是一个有效的响应设计师。
1.媒体查询
媒体查询让您可以为不同的媒体类型，如屏幕，平面，电视，手持设备等。根据媒体类型设计不同的布局，可以配置风格，字体和页面的其他元素。
在CSS3介绍，媒体查询让设计师定制内容的呈现，以适应输出设备类型的特定范围。它们由一个媒体类型声明和一个或多个媒体功能计算结果为真或假的表达式。
媒体类型的范围包括手持，屏幕，电视，打印和投影。媒体功能包括，但不限于设备的高度，宽度，纵横比，分辨率，颜色指数以及高度，在浏览器窗口的宽度。
让我们一个基本的例子;想象一下你希望你的文字大小缩小在较小的设备，如手机。该查询看起来是这样的：

响应式网站设计的3个基本原理
现在，你的段落的字体大小将被设置为1EM，除非浏览器宽度小于400像素，在这种情况下，它会收缩到0.8em。
根据我的经验，设计一个响应式网站布局的方法是先创建一个默认的主样式表的主要结构元素。然后你就可以在媒体查询添加到自定义基于布局或其他设备元素的元素。如果它比规则屈指可数，这可能是把它们搬出来独立的子板 - 你可以选择稍后加载。下面是如何将工作：

此片的代码检查装置是否处于与设备横向模式手持宽度小于720像素，如果是这样，它加载tablet_layout.css样式表。
注意，该特征的宽度，高度，大/最小宽度，最小/大高度都是指在浏览器窗口的宽度和高度。该装置的宽度和高度由设备宽度，设备高度，最小/ MAX-设备宽度，最小/ MAX-设备高度控制。如果您想查找更多的例子使用媒体查询MDN具有良好的一轮上涨。
响应式网站设计的3个基本原理
2.流体网格
“流体格”是用来描述在各种元件，而不是具有固定像素值的相对比例编码的布局的术语。
传统的CSS布局使用固定宽度网格的元素的位置。固定宽度的方式不再现在我们有设备屏幕从3英寸到几英尺今天的工作原理。在流体格的设计，都是编码在其相对比例在基座元件的角度，即，而不是指定的高度和每个元素的宽度;它被赋予一个百分比或相对大小。
想象一下，你有四列。为了使这种液体，而不是指定每个200像素宽，你必须指定它们0.2083％（即作为九百六十零分之二百）。至少，这是原则。创建一个全新的流体电网需要很在意。这是一个罕见的情况下，我宁愿建议使用自定义的工具之一。微型流体电网，变网格系统与流体基线网格是从头开始编写自己的流体网格一些伟大的替代品。
响应式网站设计的3个基本原理
3.灵活IMAGES
图像被视为灵活，当图像中本地的大小呈现，只要HTML容器支持它，但是当浏览器窗口缩小，图像缩放以适应它。
即使设计的其余部分是流畅性和响应，它不会渲染好了，如果所有的组件不扩展。这可能很麻烦图像和视频。一个700像素宽的图像会很好看在桌面上，但在一个320像素的平板电脑观看时得到剁掉。大多数现代设计响应使用的CSS大宽度属性，以使图像的规模。（此方法首先由理查德•巴特勒提出）。