响应式网页设计的基础
网页设计教学教案
网页设计教学教案第一章：网页设计基础1.1 教学目标了解网页设计的基本概念和原则掌握网页设计的工具和软件学习网页设计的基本技能和技巧1.2 教学内容网页设计的定义和作用网页设计的原则和要素网页设计的工具和软件介绍网页设计的技能和技巧讲解1.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享1.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第二章：网页布局与排版2.1 教学目标学习网页布局的基本概念和原则掌握网页排版的方法和技巧学习使用网页布局工具和软件2.2 教学内容网页布局的定义和作用网页布局的基本原则和要素网页排版的方法和技巧网页布局工具和软件介绍2.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享2.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第三章：网页配色与图标设计3.1 教学目标学习网页配色的基本原则和方法掌握网页图标设计的基本技巧和风格学习使用网页配色工具和软件3.2 教学内容网页配色的定义和作用网页配色的一般原则网页配色的具体方法网页图标设计的基本技巧网页图标设计的风格3.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享3.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第四章：网页动画与交互设计4.1 教学目标学习网页动画的基本概念和制作方法掌握网页交互设计的基本原则和技巧学习使用网页动画和交互设计的工具和软件4.2 教学内容网页动画的定义和作用网页动画的基本类型和制作方法网页交互设计的定义和作用网页交互设计的原则和技巧网页动画和交互设计的工具和软件介绍4.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享4.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第五章：网页设计与网页标准5.1 教学目标学习网页设计的基本标准和规范掌握网页设计的最佳实践和技巧学习使用网页设计的相关工具和软件5.2 教学内容网页设计标准的基本概念和作用网页设计规范的定义和内容网页设计最佳实践的介绍网页设计的工具和软件介绍5.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享5.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第六章：HTML与CSS基础6.1 教学目标学习HTML的基本结构和语法掌握CSS的使用方法和技巧理解HTML和CSS在网页设计中的重要性6.2 教学内容HTML的定义和作用HTML的基本结构和语法CSS的定义和作用CSS的使用方法和技巧HTML和CSS在网页设计中的应用6.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享6.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第七章：响应式网页设计7.1 教学目标学习响应式网页设计的基本概念和原则掌握响应式网页设计的技巧和工具学习响应式网页设计的方法和流程7.2 教学内容响应式网页设计的定义和作用响应式网页设计的基本原则和要素响应式网页设计的技巧和工具响应式网页设计的方法和流程7.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享7.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第八章：网页设计与前端开发8.1 教学目标学习前端开发的基本概念和流程掌握HTML、CSS和JavaScript在网页设计中的应用学习使用前端开发工具和框架8.2 教学内容前端开发的定义和作用HTML、CSS和JavaScript在网页设计中的应用前端开发的流程和步骤前端开发工具和框架的介绍8.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享8.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第九章：网页设计与后端开发9.1 教学目标学习后端开发的基本概念和流程掌握后端编程语言和数据库在网页设计中的应用学习使用后端开发框架和工具9.2 教学内容后端开发的定义和作用后端编程语言和数据库在网页设计中的应用后端开发的流程和步骤后端开发框架和工具的介绍9.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享9.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第十章：网页设计项目实践10.1 教学目标培养学生独立完成网页设计项目的能力培养学生团队协作和沟通能力培养学生对网页设计行业的理解和认识10.2 教学内容网页设计项目的定义和作用网页设计项目的流程和步骤网页设计项目的实践操作和技巧团队协作和沟通的方法和技巧10.3 教学方法实践操作和项目实训团队协作和沟通的实践指导和学生互评10.4 教学评估项目完成的质量和效果团队协作和沟通的参与度学生互评和教师评价重点和难点解析一、网页设计基础1.1 教学内容中的网页设计的定义和作用、原则和要素，以及网页设计的工具和软件介绍是本节课的重点。
网页设计制作知识点
网页设计制作知识点1. 基础知识1.1 HTML（Hypertext Markup Language）HTML是用于构建网页的标记语言，通过使用各种标签和属性，可以定义网页的结构和内容。
常见的HTML标签包括<head>、<body>、<div>、<p>等。
1.2 CSS（Cascading Style Sheets）CSS用于控制网页的样式和布局，通过将样式属性应用于HTML元素，可以改变它们的颜色、字体、大小等外观特性。
常见的CSS属性包括color、font-family、margin、padding等。
1.3 JavaScriptJavaScript是一种用于增加网页交互性的脚本语言，可以通过在网页中嵌入JavaScript代码来实现动态效果、表单验证等功能。
2. 响应式设计响应式设计是指根据设备的屏幕尺寸和分辨率，自动调整网页的布局和内容，以确保在不同设备上都能正常显示和使用。
常见的响应式设计技术包括媒体查询（Media Queries）、流体布局（Fluid Layout）和弹性图片（Flexible Images）等。
3. 网页导航3.1 导航栏导航栏用于展示网站的主要导航链接，通常位于页面的顶部或侧边。
可以使用HTML和CSS创建导航栏，并为每个链接添加交互效果。
3.2 面包屑导航面包屑导航用于显示当前页面在网站结构中的位置，让用户可以方便地进行导航和返回。
可以使用HTML和CSS创建面包屑导航，并为每个链接添加合适的指向。
4. 网页布局4.1 盒子模型盒子模型是用于布局和定位网页元素的基础概念，每个HTML 元素都可以看作是一个矩形的盒子。
通过设置盒子的宽度、高度、内边距（padding）和外边距（margin），可以精确控制元素在网页中的位置和间距。
4.2 栅格系统栅格系统是一种用于创建响应式网页布局的技术，将页面划分为多个均等的列。
响应式网页开发基础教程(jQuery+Bootstrap)第1章 响应式网页设计基础
max- device- width min- device- height， 定义输出设备的屏幕最小可见高度及宽度
min- device- width orientation
resolution
定义输出设备中的屏幕方向。取值可以是portrait （纵向）或landscape（横向） 定义设备的分辨率。如：96dpi（每英寸点数）， 300dpi，118dpcm（每厘米点数）等
属性
描述
width
设置窗口显示的最大宽度，为一个正整数，或字符串
"width- device"
height
设置窗口显示的最大高度，这个属性很少使用
initial- scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum- 允许用户的最小缩放值，为一个数字，可以带小数
scale
maximum- 允许用户的最大缩放值，为一个数字，可以带小数
第1章 响应式网页设计基础
1
响应式网页设计基础
什么是响应式网页 媒体查询 响应式网页呈现
本章实训
什么是响应式网页
示例：Ethan Marcotte个人的响应式网页 https:/// 手动拖动鼠标改变浏览器窗口的大小，在不同浏览器窗口
尺寸下，页面显示是否有变化？ 自动适应、流式网格布局、流式图像显示
scale
user-
是否允许用户进行缩放操作，值为"no"或"yes"（0或1），
scalable no代表不允许，yes代表允许
关键字：@media 媒体查询对浏览器的支持
响应式设计的基本原理
响应式设计的基本原理
响应式设计是一种以用户为中心的设计方法，旨在为不同设备和屏幕尺寸提供一致的用户体验。
其基本原理包括以下几个方面：
1. 弹性布局：采用相对单位和百分比来定义元素的大小和位置，使得布局能够根据屏幕尺寸自动调整，从而适应不同的设备。
例如，使用CSS的百分比单位来定义宽度和高度，以及使用
相对单位来定义边距和内边距。
2. 媒体查询：通过使用CSS的@media规则，根据设备的屏幕
尺寸和其他特征，为不同的屏幕宽度应用不同的样式文件或规则。
例如，当屏幕宽度小于某个阈值时，可以隐藏某些元素、调整布局或改变字体大小。
3. 图像优化：为了适应不同的屏幕分辨率和加载速度，使用响应式图像的技术，即根据设备的屏幕大小和像素密度，动态加载最合适的图像。
例如，使用HTML5的srcset属性或CSS的background-size属性来根据屏幕大小显示不同的图像。
4. 栅格系统：采用栅格系统来组织和布局页面内容，以确保页面在不同的设备上都能够呈现合理的结构。
栅格系统将页面划分为多个列和行，并使用CSS的媒体查询来调整列的布局和
大小。
5. 移动优先：在设计上以移动设备为优先考虑，即首先设计和优化移动端的用户体验，然后逐步适应较大屏幕设备。
这种方
法可以确保在较小屏幕上正常显示页面，并且在较大屏幕上提供更丰富的体验。
通过以上原理，响应式设计可以使网站或应用程序在不同设备上都能够提供良好的用户体验，无论是手机、平板还是桌面电脑。
前端开发实训案例响应式网页设计与开发
前端开发实训案例响应式网页设计与开发响应式网页设计是指网页能够根据用户的设备和屏幕尺寸自动适应不同的布局和展示效果，以提供更好的用户体验。
在本篇文章中，将介绍一个前端开发的实训案例，重点讨论如何设计和开发一个响应式网页。
一、需求分析在开始开发之前，需要明确网页的需求和目标。
例如，一个响应式网页可能需要适应不同尺寸的屏幕，提供良好的用户界面，同时保持页面的美观和一致性。
为了实现这些目标，我们需要进行仔细的需求分析和规划。
二、网页设计1. 界面布局设计响应式网页设计的核心是适应不同屏幕尺寸和设备。
我们可以使用流式布局或者媒体查询等技术来实现这一目标。
根据需求和目标设定，在设计网页的布局时，应该考虑到不同设备的显示效果，并合理安排各个元素的位置和大小。
2. 图片和媒体设计在设计响应式网页时，需要特别关注图片和媒体的显示效果。
我们可以通过使用自适应图片和响应式媒体等技术，来确保在不同屏幕尺寸下，图片和媒体能够正常显示，并保持页面的美观性。
3. 色彩和字体设计色彩和字体的选择对网页的整体效果起着重要的影响。
在设计过程中，应该选择适合不同屏幕尺寸的主题色彩和字体，并遵循用户友好的原则。
三、网页开发1. HTML 结构开发根据设计稿，使用 HTML 语言创建网页的结构。
在这个过程中，应该合理使用标签和元素，保持文档结构的清晰和语义的准确。
2. CSS 样式添加使用 CSS 样式为网页添加样式和布局。
在这个过程中，可以使用媒体查询，为不同屏幕尺寸设置不同的样式规则，以适应响应式设计的需求。
3. JavaScript 交互开发根据网页的需求和目标，使用 JavaScript 为网页添加交互效果，提高用户的体验。
例如，添加导航菜单的下拉功能、图片轮播等交互效果。
四、测试和优化在开发完成后，需要对网页进行测试和优化。
测试的目的是确保网页在不同设备上的显示效果和性能表现。
根据测试结果，对代码进行优化，修复 bug 和提高网页的加载速度和性能。
如何利用Dreamweaver进行响应式网站设计
如何利用Dreamweaver进行响应式网站设计第一章：Dreamweaver简介Dreamweaver是Adobe公司开发的一款专业网页设计软件，它提供了丰富的功能和工具，使得网页设计师可以方便地创建响应式网站。
在本章中，我们将介绍Dreamweaver的基本介绍、特点以及如何进行安装和配置。
Dreamweaver是一款集代码编辑、页面设计、视觉化布局和网站管理等功能于一身的综合性软件。
它支持多种编程语言，包括HTML、CSS、JavaScript等，可以满足不同网页设计需求。
Dreamweaver还提供了一系列模板和组件，使设计师能够快速创建响应式网站。
安装和配置Dreamweaver非常简单。
只需下载安装包，按照提示进行安装即可。
在安装完成后，还需要根据个人需要进行一些配置，如设置页面编码、默认代码视图和编辑器选项等。
第二章：响应式设计基础在进行响应式网站设计前，我们首先需要掌握响应式设计的基础知识。
响应式设计是一种基于不同设备和屏幕尺寸，使网站能够自动适配展示效果的设计方法。
通过使用媒体查询、弹性布局和流式布局等技术，可以实现网站内容在不同设备上的良好显示效果。
在Dreamweaver中，可以通过编辑CSS文件来创建响应式布局。
通过使用媒体查询，可以针对不同的屏幕尺寸定义不同的CSS样式。
使用弹性布局和流式布局可以使网站在不同设备上自动调整布局和大小。
第三章：使用Dreamweaver进行响应式布局设计在本章中，我们将介绍如何使用Dreamweaver进行响应式布局设计。
Dreamweaver提供了一系列工具和功能，使设计师能够快速创建响应式网站。
首先，在Dreamweaver中创建一个新的网页项目。
然后，我们可以使用Dreamweaver提供的视觉化布局功能来设计网页布局。
通过拖拽和调整元素，可以轻松创建响应式布局。
此外，Dreamweaver还提供了一系列CSS样式和布局模板，设计师可以根据需要选择合适的模板。
设计一个响应式网站
设计一个响应式网站在互联网时代，网站成为企业展示形象、进行商业运营的重要手段。
随着移动设备使用人数的不断增长，响应式网站成为了网站设计的一个必要要求。
所谓响应式网站，是指能够根据不同设备的屏幕尺寸，自动适应布局和显示效果，提供更好的用户体验。
设计一个响应式网站需要考虑以下几个方面。
一、设计风格网站的设计风格一定要符合企业的品牌形象和风格，同时要适配不同设备和屏幕尺寸。
一般来说单调、简洁、美观、易用的设计更容易受到用户的青睐。
网站的布局要具有一定的美感，同时保证信息的简洁明了，确保用户在访问时不会感到疲惫或迷惑。
色彩的选择也需要考虑不同屏幕的展现效果和用户目的，比如柔和的色调对手机用户更加友好。
二、技术实现响应式网站设计中最重要的技术便是CSS的媒体查询，这种技术可以根据屏幕尺寸进行样式调整。
开发人员需要根据不同设备屏幕尺寸和分辨率，提取样式规则，并通过媒体查询将这些规则应用到不同设备的CSS文件中。
在实现响应式设计时，还应该考虑到图片和视频的大小、加载速度、支持程度等方面。
在设计图像等媒体时也应该有适配各种设备屏幕的设想，建议使用矢量图形和可缩放的图片以及指定标准大小的视屏。
三、用户体验在设计响应式网站时，必须充分考虑用户的行为和习惯。
例如，网站必须能够在不同屏幕分辨率和大小的设备上正常显示，并且可以根据不同设备进行优化。
在移动端，网站最好采用无需放大软件或单手操作的设计方式，这样用户可以轻松地享受到更好的使用体验。
此外，网站的反应速度也是用户关注的重点。
尽量精简页面插件和JQuery等，也能有助于加速响应速度。
四、界面交互设计响应式网站时，还要考虑到涉及界面交互的部分。
通常情况下，响应式网站需要提供更为简便的国际化功能以提高用户参与度，在全球化的设计考虑下更应该考虑到各种不同国家地区的访问频率和应用场景，并评估应用界面的人性工程学。
同时，政策合规性的检查和功能需要与具体法规趋势和需求进行分析认真量化。
响应式网页设计案例实现与分析
响应式网页设计案例实现与分析随着移动互联网的普及，越来越多的用户通过移动设备访问网站。
为了更好地满足用户的需求，响应式网页设计应运而生。
本文将介绍响应式网页设计的概念和实现，并通过一个案例分析响应式网页设计的优势和实现方法。
一、响应式网页设计的概念响应式网页设计（Responsive Web Design，简称RWD）是指在不同屏幕尺寸下，网站能够自动适应并显示最佳布局和展示效果的设计技术。
响应式网页设计的目的是为了让网站在不同设备上获得更好的用户体验。
二、响应式网页设计的实现响应式网页设计的实现需要考虑以下几个方面：1. 流式布局流式布局是指页面元素的宽度使用相对单位（如百分比），而不是固定像素。
当页面尺寸发生变化时，每个元素的宽度也会随之变化。
这种布局方式能够适应不同屏幕尺寸，但是在某些屏幕上可能会出现元素过分伸展或挤压的情况。
2. 媒体查询媒体查询是指通过CSS语句来检测当前设备的屏幕尺寸和方向，从而为不同设备提供不同的样式表。
媒体查询的条件通常是屏幕宽度和高度、设备方向（横向或纵向）、设备像素比等。
使用媒体查询可以让网页在不同设备上呈现不同的布局和样式。
3. 弹性图片和嵌入式内容弹性图片和嵌入式内容是指使用百分比等相对单位来设置图片和视频等内容的宽度和高度。
通过这种方式，这些元素在不同设备上都能够适应屏幕尺寸并保持其原有的比例和清晰度。
4. 断点设置断点是指在不同尺寸下，网站需要进行布局调整的点。
通常情况下，设计师会根据不同设备的尺寸来设置不同的断点，并为不同的断点设计不同的网页布局和样式。
5. 触摸屏支持针对触摸屏设备上操作的特殊需求，设计师需要考虑网页的可操作性和可用性，并为触摸屏设备提供特定的触摸事件和样式表。
三、响应式网页设计案例分析下面我们来看一个用响应式网页设计实现的案例：Stack Overflow的网站。
1. 设计Stack Overflow的网站采用了简洁明了的设计风格，使用蓝色和灰色作为主色调，并尽可能地减少网页元素的数量和样式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
By Emily P. Lewis翻译: 亓光宇在过去的一年里，如果你不是住在深山里，就一定知道响应式网页设计，它已经成为当今的主流。
响应式设计是Ethan Marcotte提出的，概念很简单：使网站的页面布局能够根据不同设备和分辨率进行自动调整。
当我第一次了解到它时，我就立即被迷住了--特别是media queries，我马上就用到我自己的个人兼职网站上。
我甚至写了一篇文章介绍《如何使用CSS3 Media Queries响应不同设备》（强烈建议在读这篇文章之前读一下）。
在第一次尝试使用media queries后，我很快意识到我忽略了一个响应式设计的重点：灵活性。
挑战固定宽度我的个人兼职网站使用了固定宽度的设计，所有的width, margin和padding都使用了固定的像素值。
我一般都会这样写网站，因为对我来说它更简单，更快速。
但当我试图在我的固定宽度的网站上应用media queries的时候，那些简单和快速的优势全部都消失了。
为什么?因为对于固定宽度的设计，我需要非常细致的定义media queries并在CSS文件中调整每个单独的像素值，基本上，我需要为每一种可能的分辨率都设计一个全新的布局，繁琐！慢！！还不好玩！！！我有幸听了Marcotte先生在《In Control 2011》的演讲，他讨论了响应式设计的理论和最佳实践，诸如fluid grid(流体网格)实现方式。
流动且灵活的公式流动式布局是灵活的。
由于width，margin和padding（甚至字体和图像）使用了百分比和em(相对长度单位)，因此页面布局会随着浏览器的窗口变化而变化。
随着分辨率的改变，布局会成比例地进行调整，实现过程中不需要用到任何media query。
这对于实现响应式网页设计来说简直太美妙了。
如果我有一个基于比例值的布局，流动式的网格将替我完成大部分繁重的工作。
我的media query将不再需要包含那些覆盖其他分辨率的所有width, margin和padding的样式定义。
但是也有一点让我感到头疼，计算流动式网格的比例宽度需要用到一些数学知识，我数学不太好…幸运的是, Ethan 提供了一个很简单（即便对我来说）的公式来计算比例宽度:目标宽度÷上下文宽度=结果（比例宽度）这个公式用子元素的像素宽度（目标宽度）除以它父元素的像素宽度（上下文宽度），得到的结果就是这个子元素的比例宽度。
图1 实例：目标宽度（300px)和上下文宽度（960)像素在图1中,例如,深灰色区域宽度为300px，包含在宽度为960px的浅灰色区域中.这里,960像素区域是上下文元素,300像素区域是目标元素,所以我们的数学公式是:300 ÷ 960 = 0.31250.3125这个结果需要变成浏览器可识别的数值, 因此需要转化成一个比例值, 将小数点右移两位，变成31.25%即可。
然后在CSS中,将元素的宽度设定为这个比例值:1.aside {background-color: #ccc;2. float: left;3. width: 31.25%;4. 5.}测试一下公式虽然看起来很简单，但我知道必须在实际的网站中检验一下才行。
幸运的是，我最近加入了EE播客，正在重新设计那个网站。
当我的搭档给我她的 PS 设计文件时，我就决定将它打造成灵活布局的网站。
比例宽度我首先记录下所有元素的像素宽度。
（在排版设计事，我们没有严格遵循网格布局，这也是我建议的做法）正如你在图2中看到的。
整体宽度为940像素，Logo，主持人介绍和分享链接都有它们各自的像素宽度。
图2 主页和顶部导航元素的像素宽度按照 Ethan 的公式，整体宽度940px就是我的上下文宽度，根据它就可以确定所有元素的比例宽度.Logo: 240 ÷ 940 = .255319148主持人介绍: 436 ÷ 940 = .463829787分享链接: 90 ÷ 940 = .09574468随后我将这些浮点值转换成百分比值，运用到我的CSS中：1.#logo a {2.width: 25.5319148%; /* 240px / 940px */3.}4.#hosts {5.width: 46.3829787%; /* 436px / 940px */6.}7.#push {8.width: 9.574468%; /* 90px / 940px */9.}我没有对这些百分比值进行四舍五入，而是直接运用在CSS中。
我也从来没有遇到过任何浏览器对这样精度的百分比值识别错误的情况(包括IE)。
同时，我为每一个百分比值都注释了计算它所用到的目标宽度和上下文宽度，这对于今后的开发来说是非常重要的参考。
确保你的上下文宽度是正确的只要你的数学计算是正确的,那么将宽度值转化为比例值的过程就是很简单的,或者,更具体地说,只要你的上下文宽度是对的，那么你得到的比例值也就是正确的.实战中, 我通过计算得到的比例值很少会出错，除非我将上下文宽度搞错了。
像图3中标示,主持人信息是一个包含<dt>, <dd>, <a>等元素的定义列表<dl>，这些元素的宽度值各不相同。
图3 <dl>的宽度刚开始计算的时候,我先用960像素作为我的上下文宽度,因此<dt>的宽度比例为:116 ÷ 960 = .120833333但是这个比例值(12.0833333%)不是我要的正确尺寸.直到我意识到我的上下文宽度是不同的,我才得到了正确的比例值.对于<dt>来说，它的上下文元素实际是它的父元素<dl>，宽度为436像素。
因此我改变了一下参数，并计算出了我需要的百分比：116 ÷ 436 = .266055045如果你计算的比例宽度有任何问题，请先检查一下选定的上下文宽度是否正确，这会帮你省不少事。
成比例的字号我将变得更加“灵活”的第二步是使用比例字号，它和比例宽度的道理是相同的：将固定的像素值变成比例值，字体的比例值使用em 进行计算.要计算比例em，使用相同的公式(目标宽度÷上下文宽度 = 结果)即可,字体的上下文宽度就是它基本字号，通常在body元素中定义：1.body {2.font: 100%/1.5 "Open Sans", Arial, Helvetica, sans-serif;3.}大多现代浏览器的基本字号是16px，如果你设定的比例字号是100%，字号同样也是16px.现在，我们来考虑一下主持人名字的字号，在版式设计时设定的是12px，使用公式12÷16=.75就得到了它的em值。
这个浮点数不用转换成百分比值就能直接在CSS中使用：1.#hosts dd {2.font-size: .75em; /* 12px / 16px */3.}成比例的padding和margin对于padding和margin来说,那个神奇公式同样有效. 让我们考虑一下主持人信息当中，右margin被设定为20像素的<dt>元素(图3).为了得到这个margin的比例值,我使用了和计算比例宽度相同的公式:20 ÷ 436 = .04587159将小数点右移两位,得到的百分比值可用到CSS中：1.#hosts dt {2.margin-right: 4.5871559%; /* 20px / 436px */3.width: 26.6055045%;/* 116px / 436px */4.}对于padding的计算来说也是一样。
图4 主区域的横向padding的主区域（如图4所示）的宽度为940px，同时左右各有40px的横向padding。
我使用目标宽度(40px)除以上下文宽度(940px)得到它们的比例宽度：1.header, footer, .wrap { 2.padding-right: 4.25531%; /* 40px / 940px */3.padding-left: 4.25531%; /* 40px / 940px */4.width: 79.3%;5.}特例这个公式对于横向padding比例宽度的计算有一个特例：对于padding 而言，上下文元素永远都是这个元素本身，无论父元素的宽度是多少。
例如图5所示的分享链接,文字左侧均有25像素的横向padding来放图标.图5 padding的上下文宽度计算此padding的比例值时,应将这个元素本身的宽度(90px)作为上下文宽度，而不是父元素的宽度940px.（图2）25 ÷ 90 = .277777777因此padding的百分比值设定为:#push li a {padding-left: 27.7777777%; /* 25px / 90px */}纵向值到目前为止，我们已经严谨地计算了左右的水平值，但是我们在x轴和y轴方向都会设定padding和margin，这就意味着，上下文宽度应该依据水平或垂直方向而变化。
正如你之前看到的那���计算，水平方向的百分比值，都是以父元素的宽度作为上下文宽度的（padding是除外）。
与此同时，纵向em值是以基本字体大小作为上下文值的。
如果你还记得成比例的字号的计算那一部分内容，我们为设定的基本字体大小是16px. 所以，如果我想指定纵向的margin和padding，上下文高度值就是16px. 此外，纵向值应该用em表示，不是百分比–和成比例的字号的单位一样。
这个网站的<header>和<footer>都有纵向的padding：<header>有20px的顶部padding，<footer>有20px的底部padding。
(见图4)要确定这些padding比例值，我将16px作为上下文高度值(也就是基本字体的大小)，并使用相同的公式进行计算：20 ÷ 16 = 1.25请记住，垂直方向上的比例值应该以em为单位。
也就是说可以在CSS中直接使用浮点值，不用转换成百分比：1.header, footer, .wrap {2.padding: 1.25em 4.25531%; /* TB- 20px/16px | RL- 40px/940px*/ 3.width: 79.3%;4.}这里，我将横向和纵向的padding值都简写了，修改了一些注释的内容，以便为今后的开发提供能多参考。
1.padding: 1.25em 4.25531%; /* TB- 20px/16px | RL- 40px/940px*/在这些注释中，我将顶部和底部的值都用TB- 前缀进行标识，左右的值用RL-前缀。