响应式网页设计教程:展示响应式设计的基本原理
响应式网页设计，毫无疑问地变得越来越重要了。如果你还没听说过响应式设计，可以先看看我之前发的文章响应式网站。对新手来说, 响应式设计听起来可能会有点复杂, 但事实上，它比你想象的简单得多。为了让你能快速入门，我准备了一个简易的教程。通过这三个步骤，你一定可以了解响应式设计的基本原理和media query（在你有一些CSS基础的前提下）。
第一步. Meta 标签 (查看 demo)
为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在 <head>里面
| 1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
IE8及以下的浏览器不支持media query。你可以使用media-queries.js 或 respond.js 。这样IE就能支持media query了。
| 1 2 3 |
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
|
第二步. HTML 结构
这个例子里面，有header、content、sidebar和footer等基本的网页布局。 header 有固定的高180px，content 容器的宽是600px，sidebar的宽是300px。
第三步. Media Queries
CSS3 media query 响应式网页设计的关键。它像一个if语句，告诉浏览器如何根据特定的屏幕宽口来加载网页。
如果屏幕窗口小于980px，下面的规则就生效。在这里，我设置了容器的宽度为百分比的形式而不是像素单位，这样会更加灵活。
如果屏幕窗口小于700px， 定义 #content 和 #sidebar 为自适应宽度，并移除它的浮动属性，这样它会全屏显示。
如果屏幕窗口小于480px (移动设备的屏幕)， 设置#header 高为自适应，把h1字体设置为24px，并且隐藏#sidebar。
这些media query，你可以写很多。在这个demo，我只写了三个。media query的目的是应用不同的CSS规则来实现屏幕的最佳布局。它可以写在同一个CSS文件，也可以写在不同的文件。
来源：http://www.poluoluo.com/jzxy/201206/166577.html
响应式网页设计教程:展示响应式设计的基本原理相关推荐
- App架构设计经验谈:展示层的设计
2019独角兽企业重金招聘Python工程师标准>>> App架构设计经验谈:展示层的设计 三层架构中,数据层和业务层都已经做过了简单的分享,最后,就剩下展示层了.本篇就给各位分享下 ...
- PS网页设计教程XXV——使用Photoshop设计的老式组合布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
- 计算机辅助药物设计教程,《计算机辅助药物设计》计算机辅助药物设计-完整版.pdf...
计算机辅助药物设计完整版 第1 章 概论 一.药物发现一般过程 新药的研究有三个决定阶段:先导化合物的发现,新药物的优化研究,临床与开发研究.计算 机辅助药物设计的主要任务就是先导化合物的发现与优化. ...
- 这些响应式网页测试工具确保你的设计万无一失
响应式设计几乎是当代网页设计的基础构成之一.在实际设计和开发的过程中,想要让网站按照设计响应不同尺寸屏幕,设计师和前端需要花费相当的时间来进行测试和优化.所以,今天我们搜集了7款功能强大的响应式页面测 ...
- java 流式_Java核心教程5: 流式编程
本次课程的标题不像之前那样易懂,是一个陌生的概念,"流式编程"是个什么东西? 在了解流式编程之前先思考一下"流",水流.电流.人流,这些都是流.而流式编程则是让 ...
- UI设计教程分享：banner设计
我们都知道在一个网站中,banner图片对于浏览者来说是非常重要的,尤其是电商banner,它的最主要目的是营销,是要让消费者有冲动去购买,这对设计的要求也就更高了.而企业网站也一样,一个合适的ban ...
- UI设计教程：关于版式设计
版式设计是视觉传达的重要手段之一,版式设计,即把有限的视觉元素在版面页进行有效的视觉组合,最优化地传达信息的同时,去影响受众,使受众产生视觉上的美感. 版式设计基本流程 在进行版式设计时,设计作品的 ...
- java用户界面设计教程_Java图形用户界面设计(Swing)的介绍
前言 Swing是一个用于开发Java应用程序用户界面的开发工具包.它以抽象窗口工具包(AWT)为基础使跨平台应用程序可以使用任何可插拔的外观风格.Swing开发人员只用很少的代码就可以利用Swing ...
- html5响应式导航条,10个响应式设计的导航菜单源码-附教程
10个响应式设计的导航菜单源码-附教程 Sponsor 在2013年里,响应式Web设计将会开始普及,我们应该学习这些新技术,尤其作为网页设计师和前端开发人员,学习CSS3样式表和HTML5是必不可少 ...
最新文章
- Swift的类，及存储属性，计算发发样码
- windows上的svn服务器迁移到linux
- 拼多多一度跌破发行价：已遭上海工商约谈 被要求自查自纠
- javsscript练习
- Perl匿名数组、hash和autovivification特性
- DevExpress 选择框如何进行模糊查询
- 蛋疼的中文编码及其计算机编码历史
- 动态规划——数塔问题
- vue组件之间8种组件通信方式总结
- Spring Cloud Alibaba | Dubbo 与 Spring Cloud 完美结合
- 编程之美读书笔记2.15 - 子数组之和的最大值（二维）
- CSS颜色表示的几种方式
- 子网掩码掩码计算器_Javascript加载掩码
- android toast显示时间,Android Toast自定义显示时间
- win7未能成功安装驱动服务器,win7找不到驱动程序提示“未能成功安装设备驱动程序”的解决方法...
- Unity3D天气系统插件UniStorm 3.0.1.1 插件使用说明
- 出现VMware Workstation 无法连接到虚拟机。请确保您有权运行该程序、访问该程序使用的所有目录以及访问所有临时文件目录。 未能将管道连接到虚拟机: 所有的管道范例都在使用中。
- 伤疤好了有黑印怎么办_疤痕留下黑印怎么办
- 【web前端教程笔记】
- python爬取html中文乱码