CSS之Responsive网页设计的三个特性

Responsive网页设计无疑是网页设计中的一个热门话题。某种程度上，他将是一个最受欢迎的网页设计概念，因为随着网站用户日渐多样化的访问方法，比如说“iPad”、“iPhone”、“Android移动设备”、“平板电脑”、“台式机”以及“ 笔记本”等不同形式的显屏出现。这样我们以前那样的网页设计就无法在适合上述各种设备的浏览，这也给我们今后的网页设计工作提出一个新的概念——Responsive设计

Responsive网页设计的主要特点

- 该网站必须建立灵活的网格基础

- 引用到网站的图片必须是可伸缩的

- 不同的显示风格，需要在media queries上写不同的样式

1. 灵活的网格系统

网页的网格系统应用，他在网页设计中的概念越来越模糊。换句话说，你的网站必须包括一个灵活的网格系统，并不意味你的网站需要使用一个庞大的网格系统，比如说960s。所以在你的网页设计中定义一个你自己需要的列、列间距等参数，才是一个网页设计的最佳解决方案，自己定义的和现有的任何一个系统同样是灵活可变的

事实上，大多数现有的网格系统限制了我们自定义列的大小，和间距，换回来说，使用现有的网格系统，我们需要遵循他的使用模板原则才能生效，但这样一来往往对我们的使用有太多的限制，然而自己动手一个网格系统，又是一件棘手的事，而且也是一件费时的事。所以说，无论我们使用现有的网格还是自己自定义的网格系统，最主要的是要让他适合我们布局的大小和间距的需要

这样就意味着，我们需要放弃常用的“px”固定布局，而使用百分比或者“em”这样的流体布局来实现“web布局”。当然这样并不是说我们在设计软件中不能使用“px”，我们在设计页面的图片效果时，还是在“px”的基础上实现，因为我们只是在Web页面中使用一个相对单位来实现需要的网页布局。这样说或许有点模糊。我们可以换过来说“设计web页面的模型效果，我们还是使用“px”来定其大小与间距，只是在图片效果转成web页面效果时，才采用“百分比”或用“em”这样的相对单位来替代“px”，从而实现一种比较灵活的布局。”具体他们之间的区别，大家不妨移步到Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?查看他们之间的区别所在

2. 灵活的图片

这里所说的灵活的图片指是的图片的可收缩性，这一点也是Responsive设计中的另一个关键点。灵活的图像常常给网页设计师有点头痛，有点烦。因为载入是超大的图像时，我们在缩小显屏大小时，这些超大的图像就会破坏我们的布局。为了让更小的显屏和其小移动设备能显示更多的文本内容，我们需要缩小这些超大的图片，最早使用的是就是通地改变图片的width和height属性来实现。这样一来对于网页载入并不是一个很好的做法。这也将严重的影响你的网站形象。还好，随着网页设计的向前发展，我们看到网站上越来越少使用那些不必要的图片，但是目前，我们还是需要考虑如实来处理这样的一个问题，让这个超大图片在你的Responsive设计中并不会给你带来麻烦

就是使用CSS来控制，使用CSS中的“overflow:hidden”将超出的图片部分进行剪切，随着他的容器转变，以达到新的显示效果

其实这种方法也不是最佳的解决方法，我们曾在《Responsive设计和CSS3 Media Queries的结合》中也探讨了如何实现图片的可伸缩性

3. Media Queries

Media Queries是CSS3之中的一个新增属性，也是Responsive设计中令人最兴奋的一个功能

通常情况下，我们有一个老的思路，就是我们的网站只能一个适合的样式，如果你想动态的改变样式，就需要借助其他的语言来帮忙，但这个Media Queries出现，可以让我们使用相同的HTML结构，创建多个布局，并且还可以实现多个不同的页面效果，从而使用网站适合各个不同显屏的浏览器浏览

大家需要注意一点Media Queries不是专门的解决移动设备和平板设备的布局。相反，Media Queries和Responsive的配合，能让我们觉得我们的设计能适应不同的屏幕大小显示。有关于这方面的实例介绍，大家感兴趣的话可以点阅——《Responsive设计和CSS3 Media Queries的结合》

从Responsive设计中三个特点来看，确实让人兴奋不起来，可是事实上，这将是一个良好的设计开始。良好的THML结构和一个灵活多变的布局，难道不让你觉得特别的新吗。在这样的一个日新月异的技术变化的大背景之下，需要灵活的布局更是势在必行。现在，让我们可以更好的适应更多的显屏浏览的情况下，我们需要的是流体的，灵活的一种设计。Responsive设计迫使我们采取行动开始做这样的事情

CSS之Responsive网页设计的三个特性相关推荐

网页设计（三）——DIV+CSS布局2
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码...
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML5期末大作业：运动系列——NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成
HTML5期末大作业:运动系列--NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成临近期末 ...
HTML5期末大作业：动漫网站设计——灌篮高手(4页)HTML+CSS 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
网页设计（六）——基于HTML+CSS框架的网页设计实例
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列之前写了五期,分别为: 网页 ...
HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)...
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
web前端期末大作业 ~我的家乡-绿城之都html+css+javascript旅游网页设计实例
web前端期末大作业 ~ 我的家乡-绿城之都html+css+javascript旅游网页设计实例临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页 ...
HTML5期末大作业：管理系统网站设计——学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:管理系统网站设计--学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业常见网页设计作业题材有个人. 美食. ...

CSS之Responsive网页设计的三个特性

Responsive网页设计的主要特点

- 该网站必须建立灵活的网格基础

- 引用到网站的图片必须是可伸缩的

- 不同的显示风格，需要在media queries上写不同的样式

1. 灵活的网格系统

2. 灵活的图片

就是使用CSS来控制，使用CSS中的“overflow:hidden”将超出的图片部分进行剪切，随着他的容器转变，以达到新的显示效果

其实这种方法也不是最佳的解决方法，我们曾在《Responsive设计和CSS3 Media Queries的结合》中也探讨了如何实现图片的可伸缩性

3. Media Queries

Media Queries是CSS3之中的一个新增属性，也是Responsive设计中令人最兴奋的一个功能

CSS之Responsive网页设计的三个特性相关推荐

最新文章

热门文章