响应式布局
移动端尺寸规范
移动端尺寸规范移动端尺寸规范是针对移动设备上的用户界面设计的一组标准化尺寸规范。
移动设备的屏幕尺寸多种多样，不同的设备有不同的屏幕尺寸和分辨率，因此设计师需要遵循一定的规范来确保设计在不同设备上的一致性和可用性。
下面是关于移动端尺寸规范的一些要点。
1. 响应式布局：移动设备的屏幕尺寸和方向不断变化，因此设计师需要采用响应式布局来适应不同的屏幕尺寸。
响应式布局可以根据设备屏幕尺寸的变化自动调整元素的大小和位置。
2. 分辨率适配：不同的移动设备有不同的屏幕分辨率，设计师需要根据不同设备的分辨率来适配设计。
常见的屏幕分辨率包括320x480、640x960、750x1334、1080x1920等，设计师需要确保设计在不同分辨率下能够正常显示。
3. 导航栏高度：移动设备上的导航栏通常位于屏幕顶部，用于显示各种导航和操作按钮。
导航栏的高度可以根据具体设计需求来确定，一般建议在48px至56px之间。
4. 底部导航栏高度：移动设备上的底部导航栏通常位于屏幕底部，用于显示底部菜单和操作按钮。
底部导航栏的高度可以根据具体设计需求来确定，一般建议在48px至56px之间。
5. 图标大小：移动设备上的图标大小需要适应屏幕尺寸的变化，一般建议使用矢量图标来保证图标在不同尺寸下的清晰度。
图标的尺寸可以根据具体设计需求来确定，一般建议在16px至24px之间。
6. 文字大小：移动设备上的文字大小需要适应屏幕尺寸的变化，一般建议使用相对单位（如em或rem）来定义文字大小，以便根据屏幕尺寸的变化自动调整文字大小。
文字的大小可以根据具体设计需求来确定，一般建议在14px至18px之间。
7. 行高：移动设备上的行高需要根据文字大小来确定，以确保文字在不同设备上的可读性和排版效果。
行高一般建议设置为文字大小的1.5倍至2倍之间。
8. 边距和间距：移动设备上的边距和间距需要适应屏幕尺寸的变化，以保证界面的美观和可用性。
一般建议将边距和间距设置为8px至16px之间。
网页设计排版知识点汇总
网页设计排版知识点汇总一、网页设计排版概述在网页设计中，排版是至关重要的一环。
良好的排版可以提升网页的可读性，增强信息的传递效果，使用户更加舒适地浏览网页内容。
本文将对网页设计排版中的重要知识点进行汇总，包括字体选择、行高与字距、对齐方式、布局等方面。
二、字体选择1. 字体类型在网页设计中，选择适合的字体类型对于页面的整体风格与氛围非常重要。
常用的字体类型包括无衬线字体（如Arial、Helvetica）、衬线字体（如Times New Roman、Georgia）和等宽字体（如Courier New、Monaco）。
根据网页的主题和风格，选择相应字体类型以增加页面的可读性和美感。
2. 字体大小字体大小的合理选择可以使文字内容更加易读，一般来说，标题需要使用大号字体（如24px），正文部分则选用中号字体（如14px），较小的字体适用于注释、引用等次要内容。
3. 粗体和斜体粗体和斜体是在网页设计中常用的强调手段，可以突出某些重要信息或者强调关键词汇。
但是需要注意，过多地使用粗体和斜体会导致排版混乱，建议谨慎使用。
三、行高与字距1. 行高行高是指行与行之间的竖直间距，合理设置行高可以使文字更易读。
一般来说，行高设置为字体大小的1.5倍到2倍之间，具体的行高选择可以根据页面的风格和排版效果进行微调。
2. 字距字距是指字母与字母之间的水平间距，过于紧密或过于宽松的字距都会影响阅读体验。
一般来说，正常的字距设置可以使文字看起来更加紧凑、整齐。
但是需要根据字体的具体形态和页面的需要进行适当调整。
四、对齐方式1. 左对齐左对齐是最常见的对齐方式，文字以页面左边缘对齐，行的末尾可能会产生不对齐的情况。
左对齐适用于大多数情况，能够保持内容的整齐和易读性。
2. 居中对齐居中对齐使文字相对于页面居中显示，可以给人以美观和稳定的感觉。
适用于标题、短句或者需要强调的文字。
3. 右对齐右对齐是文字相对于页面右边缘对齐，与左对齐相反。
网页设计基础：理解网页布局的五种方式
网页设计基础：理解网页布局的五种方式介绍在现代互联网时代，网页设计成为了一门非常重要的技能。
而网页布局则是网页设计中的一个关键方面。
不同的网页布局方式可以影响用户对网页信息的感知和使用体验。
本文将介绍五种常见的网页布局方式，帮助读者理解并掌握这些不同的布局方式。
一、流式布局（Fluid Layout）流式布局也被称为自适应布局，其主要特点是网页容器会根据设备屏幕宽度或浏览器窗口大小进行相应调整。
这意味着无论用户在大屏幕电脑、平板还是手机上访问，页面都能自动适应屏幕尺寸而不至于出现滚动条。
流式布局最常用于响应式设计，通过CSS媒体查询和百分比单位来实现页面元素的相对定位和缩放。
二、定宽布局（Fixed Layout）定宽布局是指将页面内容固定在一个特定宽度上而不会随设备或窗口大小变化而改变。
这种方式通常利用像素（px）作为单位来设置元素尺寸。
优势在于保持设计的稳定性和一致性，但会在不同设备上导致页面出现滚动条或被裁剪。
三、响应式布局（Responsive Layout）响应式布局是一种综合了流式布局和定宽布局的方式。
通过使用CSS媒体查询和断点设置，在不同的屏幕尺寸下重新排列和调整页面元素，以适应各种设备。
这样可以提供更好的用户体验，同时减少开发者需要为不同设备制作独立网站的工作量。
响应式布局根据屏幕宽度或浏览器窗口大小自适应调整页面布局，使得用户能够在不同设备上获得最佳呈现效果。
四、分栏布局（Grid Layout）分栏布局是指将网页内容划分为多个平行区域，并利用CSS网格系统将页面元素放置到相应的栏中。
通过使用指定的列数和行数，可以实现复杂而灵活的网格结构。
分栏布局常见于报纸、杂志等需要多个板块并存的场景。
分栏布局可以提供良好的信息组织和视觉效果，但需要使用特定的CSS框架或自定义代码来实现。
五、居中布局（Centered Layout）居中布局是将网页内容放置在页面的中间，使其居中显示。
这种布局方式适用于简单、集中展示的页面结构，如单个产品介绍、相册或简报。
响应式vuetify
响应式vuetify响应式布局是指能够适应各种不同分辨率和设备的网页布局。
随着移动设备的普及，响应式布局成为了Web设计的基本要求之一。
而Vuetify是一款基于Vue.js的Material Design组件库，它提供了丰富的UI组件和交互效果，使得开发响应式网页变得更加简单和高效。
一、Vuetify介绍Vuetify是一个开源的、基于Vue.js的Material Design组件库。
它不仅提供了丰富的UI组件和交互效果，还遵循了Material Design的设计原则，使得开发者可以快速构建出优雅美观的Web应用。
1.1 Material Design介绍Material Design是由Google推出的一套统一的设计语言，旨在为用户提供一致、美观、直观的界面体验。
它强调直观的动画、平滑的过渡效果以及真实的3D效果，使得用户可以更加轻松地和应用进行交互。
1.2 Vuetify的特点Vuetify作为一款Material Design组件库，具有以下几个特点：1) 提供了丰富的UI组件：Vuetify提供了大量的UI组件，包括按钮、标签、卡片、对话框等，使得开发者可以快速构建界面。
2) 遵循Material Design设计原则：Vuetify的设计风格遵循了Material Design的设计原则，使得应用具备了现代感和美观度。
3) 简单易用：Vuetify提供了详细的文档和示例，使得开发者可以快速上手，并且可以灵活配置组件的样式和交互效果。
4) 响应式布局支持：Vuetify内置了响应式布局系统，可以根据设备的分辨率和屏幕大小，自动调整界面布局，适配不同的设备。
5) 主题定制：Vuetify支持通过自定义主题，实现个性化的界面样式。
二、Vuetify的使用2.1 安装Vuetify使用Vuetify前，首先需要确保已经安装了Vue.js，并创建了一个Vue项目。
然后，可以通过npm安装Vuetify：```npm install vuetify```安装完成后，在main.js文件中引入Vuetify并配置：```javascriptimport Vue from 'vue';import Vuetify from 'vuetify';import 'vuetify/dist/vuetify.css';e(Vuetify);new Vue({vuetify: new Vuetify(),}).$mount('#app');```2.2 使用Vuetify的组件Vuetify提供了丰富的UI组件，以下是一些常用组件的示例：```html<template><v-app><v-container><v-row><v-col cols="6"><v-card><v-card-title>Title</v-card-title><v-card-text>Content</v-card-text><v-card-actions><v-btn text>Action</v-btn></v-card-actions></v-card></v-col></v-row></v-container></v-app></template><script>export default {name: 'App',}</script>```通过上述代码，我们可以构建一个简单的页面，该页面包含一个卡片组件，并且使用了响应式的布局。
响应式网格（栅格化）布局
响应式⽹格（栅格化）布局响应式⽹格系统响应式⽹格系统的概念把⽹页划分成列、⾏、外边距、隔离带（各列与各⾏之间的空⽩）等由⼀系列相交的⽔平轴和垂直轴组成的⽹格。
⽹格布局的作⽤在于更有效地控制元素在⽹页中所占⽐例的⼤⼩。
⽐如，博客中有⼀个留⾔板模块，在⽐较⼤的屏幕上，我们希望它占了右边 25% 的宽度，在⼿机等⽐较⼩的屏幕上，我们希望它占 100% 的宽度，出现在博客⽂章下⽅。
⽹格布局是⼀种实现这⼀需求的办法，它的好处是，把所有的宽度分为固定栏数（常⽤ 12 栏），从⽽更⾼效的控制元素宽度。
响应式系统的基本构成通过可以更加详细地了解响应式⽹格是如何实现的，通常主体部分由以下构成：containerrowscolumnsgutter(列与列之间的空⽩)breakpoint(通过media query实现响应式)创建⽹格系统之前需要知道的事情1.应该使⽤等宽的列吗？按理来说，我们可以使⽤等宽的列或不等宽列来划分⽹格，这要决定于我们的⽹页复杂程度，⼀般都是使⽤等宽列，更加灵活和实⽤，像Bootstrap框架，通过元素所占的列数很⽅便计算出元素的宽度。
2.应该使⽤多少列？如上图，我们可以使⽤8栏、10栏、12栏都可以，通常取决于设计图的布局类型和内容，如⼀列、两列、三列布局等，如果不清楚布局类型和内容的话，⼀般使⽤灵活的12栏布局。
3.应该设置多⼤的列宽和间距？解法⼀：由上⽽下，例如容器宽度为1140px,gutter为20px，则列宽为)1140px / 12 -20px。
（通常使⽤这种⽅法）解法⼆：由下往上，通常列宽设为间距的倍数，如gutter为20px，则列宽为60px。
4.如何让⽹格适应不同视窗的⼤⼩？随着⽤户代理的⼤⼩变化，列宽和间距需要在断点处breakpoint做出相应的改变以得到更好的视觉体验。
列宽使⽤百分数，⽽间距gutter固定的⼤⼩px或rem。
如Bootstrap/* Bootstrap */.col-md-4 {width: 33.33333%;padding-left: 15px;padding-right: 15px;float: left;}5.是否使⽤预置类？使⽤预定类col-*（HTML grid systems），直接在html结构⾥添加<div class="row"><div class="col-md-8 col-lg-6"></div><div class="col-md-4 col-lg-6"></div></div>优点：直观、直接知道多少元素所占的列数缺点：HTML结构膨胀，需要预先知道布局不使⽤预定义类（CSS grid systems)<div class="content"></div><div class="sidebar"></div>优点：可维护性强、不⽤更改HTML、直接在CSS指定样式缺点：不够直观使⽤第⼆种维护性好，应⽤性更强，当需求更改的时候，不⽤直接更改HTML的类名。
使用前端框架进行多端适配的最佳实践
使用前端框架进行多端适配的最佳实践前端框架是现代Web开发中不可或缺的工具，它能够帮助开发人员快速构建复杂的用户界面和应用程序。
然而，随着移动设备和平板电脑的普及，开发人员面临着如何在不同的设备上提供一致的用户体验的挑战。
本文将介绍使用前端框架进行多端适配的最佳实践。
1. 响应式布局响应式布局是一种通过使用灵活的网格系统和媒体查询，使网站在不同设备上展现不同布局的技术。
在应用前端框架时，我们可以利用框架提供的响应式布局系统来实现多端适配。
通过合理设置网格系统和媒体查询的断点，可以使应用在不同设备上呈现出合适的布局，并提供更好的用户体验。
2. 样式适配在多端适配中，样式的统一性是至关重要的。
前端框架通常提供了一套样式库，可以帮助开发人员快速构建漂亮的用户界面。
然而，不同设备的屏幕尺寸和分辨率的差异可能导致样式的失衡。
为了解决这个问题，我们可以使用CSS预处理器，如Sass或Less，来编写可复用的样式片段，并使用框架提供的变量和混合功能来解决样式的适配问题。
3. 组件复用前端框架通常提供了一套组件库，包含了各种常用的UI组件，如按钮、导航栏和表单等。
在多端适配中，我们可以利用这些组件来快速构建具有一致性的用户界面。
同时，我们还可以自定义组件并将其封装成可复用的模块，以便在不同端的应用中进行复用。
这样可以减少重复的开发工作，并保持应用的一致性和稳定性。
4. 图片优化不同设备的屏幕分辨率和网络带宽的不同可能导致图片在加载和显示时出现问题。
为了解决这个问题，我们可以使用前端框架提供的图片优化功能。
例如，可以使用Lazyloading技术延迟加载图片，减少页面加载时间；使用响应式图片来根据设备的屏幕尺寸动态加载不同分辨率的图片，提高用户体验。
5. 富文本编辑器在多端应用中，用户通常需要输入和编辑文本信息。
为了提供一致的富文本编辑体验，可以利用前端框架提供的富文本编辑器组件。
这些组件通常支持常用的文本编辑功能，如字体设置、图像插入和格式化等。
平面布局现状分析报告范文
平面布局现状分析报告范文1. 引言平面布局是指在设计中将不同元素有机地组合在一起，形成一个整体的方式。
平面布局在网页设计、平面设计以及平面广告等领域广泛应用。
本报告旨在分析当前平面布局的现状，并对其影响因素进行探讨，以期为未来的设计提供参考。
2. 现状分析2.1 响应式布局随着移动设备的普及，响应式布局成为了主流趋势。
响应式布局的核心原则是在不同尺寸的屏幕上，保持良好的用户体验。
它使用弹性的网格系统和相对单位来适应不同的屏幕尺寸，并通过媒体查询来调整布局。
2.2 扁平化设计扁平化设计是一种简化、去除冗余与装饰效果、强调内容与功能的设计风格。
扁平化设计注重简洁、直接的表达方式，以及明确的视觉层级。
这种设计风格使得页面更加清晰、易读，并提升了用户的交互体验。
2.3 全屏设计全屏设计是指利用整个屏幕空间进行设计的方式。
它通常通过大背景图或者视频来占据整个屏幕，以吸引用户的注意力。
全屏设计在一些品牌宣传、产品推广等场景中得到了广泛应用，为视觉冲击力提供了新的可能性。
2.4 图文混排设计图文混排设计是将文字与图片有机地结合在一起。
它可以增加页面的信息密度、提升视觉吸引力，并帮助用户更快速地获取所需信息。
图文混排设计常用于新闻、文章等文本内容较多的页面，在传递信息的同时提供更好的阅读体验。
2.5 网格布局网格布局是一种系统地将页面划分为网格，以组织内容和布局元素的方式。
它不仅使得元素的排版更加整齐、统一，还提供了更多自由度来调整页面的布局。
网格布局有助于页面的可读性和可导航性，同时也便于适应不同平台和设备。
3. 影响因素分析3.1 用户需求用户需求是平面布局设计的首要考虑因素。
设计师需要了解目标用户群体的特点和偏好，并根据其需要合理布局，以提供更好的用户体验。
3.2 设计趋势设计趋势的变化也会对平面布局产生影响。
随着技术的不断进步，一些新的设计趋势不断涌现，如虚拟现实、增强现实等。
设计师需要关注这些趋势，并根据需要灵活调整布局方式。
前端框架技术中常见的移动端兼容性问题及解决方案
前端框架技术中常见的移动端兼容性问题及解决方案移动端的普及和发展使得移动应用的需求与日俱增，作为前端工程师，我们需要关注和解决移动端兼容性问题。
本文将介绍前端框架技术中常见的移动端兼容性问题，并提供相应的解决方案，以帮助开发人员充分利用前端框架技术开发移动应用。
一、移动端兼容性问题1. 响应式布局问题：不同移动设备的屏幕尺寸和分辨率各不相同，因此在移动端使用响应式布局时，可能会出现布局错乱、元素重叠等问题。
2. 触摸事件问题：移动设备使用触摸屏进行操作，与传统鼠标点击事件不同，可能需要特殊处理触摸事件，以确保用户交互的正常。
3. 动画效果问题：由于移动设备的性能和浏览器兼容性的不同，一些动画效果可能在某些设备上无法正常显示或性能不佳。
4. 图片和字体的适配问题：移动设备的屏幕像素密度高于传统设备，因此需要提供高清晰度的图片和字体，并与不同设备的屏幕密度匹配。
5. 浏览器兼容性问题：移动设备上常见的浏览器有Safari、Chrome、Firefox等，它们对于CSS和JavaScript的支持程度不尽相同，需要针对不同浏览器做兼容性处理。
二、解决方案1. 响应式布局解决方案：使用CSS媒体查询和弹性布局等技术，根据不同的屏幕尺寸和分辨率，适配不同的布局样式，确保页面在不同设备上的显示效果一致。
2. 触摸事件解决方案：使用JavaScript的触摸事件API，在触摸开始、移动和结束时进行相应处理，如使用touchstart、touchmove和touchend等事件来代替传统的鼠标点击事件。
3. 动画效果解决方案：使用CSS3的动画效果，尽量避免使用JavaScript实现动画，因为CSS3的动画效果更加流畅和高效，且可以通过媒体查询和前缀等方式实现浏览器兼容。
4. 图片和字体的适配解决方案：使用矢量图形代替位图图片，以便在不同分辨率的屏幕上进行适配，并使用字体图标和字体资源来替代图片资源，以减少网络请求和提高用户体验。
网页布局案例
网页布局案例在网页设计中，网页布局是至关重要的一环，它直接影响着用户对网页的整体印象和使用体验。
一个合理的网页布局能够使用户更加轻松地找到所需信息，提高用户满意度和留存率。
下面，我们将通过几个实际案例来介绍一些常见的网页布局方式，希望能够为大家提供一些灵感和启发。
案例一，传统的三栏布局。
传统的三栏布局是指将网页分为左侧栏、右侧栏和中间主体内容区域的布局方式。
左侧栏通常用于展示导航菜单、个人信息等，右侧栏则用于放置广告、热门文章等内容，而中间主体内容区域则是展示网页的核心内容。
这种布局方式简单直观，适用于大部分网站，但需要注意的是在不同设备上的响应式布局。
案例二，单栏全屏布局。
单栏全屏布局是近年来比较流行的一种布局方式，它将整个网页分为一个栏目，内容铺满整个屏幕，给人一种简洁、大气的感觉。
这种布局适用于展示图片、视频等富媒体内容，能够吸引用户的注意力，但需要注意在不同分辨率的屏幕上的适配问题。
案例三，瀑布流布局。
瀑布流布局是一种动态加载内容的布局方式，它将网页内容以瀑布流的方式呈现，使得用户可以不断向下滚动浏览内容。
这种布局适用于展示图片、商品等需要大量展示的内容，能够提高用户的浏览体验，但需要注意内容的加载速度和页面的性能优化。
案例四，响应式布局。
随着移动互联网的发展，响应式布局变得越来越重要。
响应式布局是指能够根据用户的设备（如手机、平板、电脑）自动调整布局和样式的设计方式，以适应不同设备上的浏览。
这种布局方式能够提高用户的跨设备体验，但需要注意在不同设备上的布局和内容的展示方式。
总结：网页布局是网页设计中至关重要的一环，不同的布局方式适用于不同类型的网站和内容展示。
在设计网页布局时，需要考虑用户的需求和习惯，合理安排页面元素，提高用户的使用体验。
希望以上案例能够为大家在网页设计中提供一些参考和启发，谢谢阅读！。
ui设计术语
ui设计术语UI设计术语UI设计（User Interface Design）是指人机交互界面的设计，主要是为用户提供更好的使用体验和视觉效果。
在UI设计中，有许多专业术语需要熟悉，下面将对其中一些常见的术语进行详细解释。
一、布局1. 栅格系统（Grid System）栅格系统是指将页面或应用程序分割成等宽或等高的列和行，并在这些列和行之间创建一定的间隔。
栅格系统可以帮助设计师更好地组织页面内容，使页面看起来更加整齐和规范。
2. 响应式布局（Responsive Layout）响应式布局是指网站或应用程序可以自动适应不同设备上的屏幕大小。
通过使用响应式布局，可以确保用户在不同设备上获得相似的使用体验。
3. 固定布局（Fixed Layout）固定布局是指网站或应用程序具有固定宽度和高度，无论屏幕大小如何都不会改变。
这种布局适用于具有固定尺寸的元素或内容。
二、颜色1. 调色板（Color Palette）调色板是指一组预定义颜色，通常由品牌颜色、主题颜色、次要颜色和背景颜色组成。
调色板可以帮助设计师在整个项目中保持一致的颜色风格。
2. 对比度（Contrast）对比度是指两种颜色之间的明暗差异。
在UI设计中，对比度可以帮助用户更好地区分不同的元素和内容，提高可读性和可用性。
3. 饱和度（Saturation）饱和度是指颜色的强度或纯度。
在UI设计中，饱和度可以帮助设计师创建视觉吸引力强的界面。
三、字体1. 字体家族（Font Family）字体家族是指具有相似外观和特征的字体集合。
在UI设计中，选择合适的字体家族可以使界面看起来更加专业和一致。
2. 行高（Line Height）行高是指行与行之间的距离。
在UI设计中，合适的行高可以提高可读性，并使文本更容易阅读。
3. 字重（Font Weight）字重是指字体的粗细程度。
在UI设计中，选择合适的字重可以帮助突出重点内容，并为用户提供更好的视觉效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
响应式布局
什么叫做响应式布局？
也即是响应式Web设计。
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
这个概念是为解决移动互联网浏览而诞生的。
怎样实现响应式布局？
对于这个问题，我们可以通过CSS3中的Media Query来实现，即媒介查询。
媒体查询让CSS 可以更精确作用于不同的媒体类型和同一媒体的不同条件。
媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。
如：width会有min-width和max-width 媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。
通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。
首先我们要允许网页宽度自动调整
在网页代码的头部，加入一行viewport元标签：
<meta name=”viewpoint” content=”width=device-width,initial-scale=1”>
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
下面通过Media Query我们可以得到不同设备屏幕的宽和高，从而我们就可以分别处理了。
根据不同的设备屏幕宽度，设置不同的CSS。
那么这里有两种方法：
1、外联样式表
在这里我们可以根据不同的设备载入不同的CSS样式表
当页面宽度大于等于960px时，载入样式表gt-960px.css
当页面宽度大于等于600px且小于等于960px时，载入样式表gt-600px-lt-960px.css
当页面宽度小于等于600px时，载入样式表lt-600px.css
2、样式表中内嵌法
当页面宽度大于等于960px时
当页面宽度大于等于600px且小于等于960px时
当页面宽度小于等于600px时
请注意，我这里还是用到了绝对宽度，如”width:400px;“，严谨地说，这还是不够规范的，当然这还要看具体情况了，如果想完全响应式布局的话，那么就不能使用固定的宽度了，可以设为自动或百分比，如”width:auto;“或”width:xx%;“，另外字体也要设为百分比。
对于布局来说，我们算是搞定了，但页面中的图片和视频也不能忽视。
弹性图片
我们需要为图片设置max-width: 100%和height: auto，来实现其弹性化。
弹性内嵌视频
同样，对于视频我们也需要做max-width: 100%的设置；但是Safari对embed的该属性支持不是很好，但我们可以用width: 100%来代替
一、显示器屏幕屏幕比例
目前常见的显示器屏幕比例（长:宽）有四种：
∙5:4 = 1.25
∙4:3 = 1.33
∙16:10 = 1.60
∙16:9 = 1.77
以上屏幕比例越靠后屏幕看起来越“扁”，越靠前看起来越“正"。
屏幕尺寸和宽高比例是绝对概念。
二、显示器常见分辨率
再来看一下常见分辨率有哪些，由于显示器分辨率概念是相对的（物理分辨率是绝对的），随制造工艺的不同、显卡性能不同还会有所差异，最佳分辨率可能不同，但显示屏的理论最高分辨率都是确定的（制造工艺确定）。
下面是一些常见的分辨率，并不完整，比如还有320×240、640×480等分辨率则大多使用在监视器或小屏幕手持设备上。
∙800×640（宽高比1.25），800×600（宽高比1.33）
∙1024×768（宽高比1.33），
∙1280×960（宽高比1.33），1280×1024（宽高比1.25），1280×800（宽高比1.60），1280×720（宽高比1.77）
∙1400×1050（宽高比1.33），1440×900（宽高比1.60），1440×810（宽高比1.77）∙1600×1200（宽高比1.33），
∙1680×1050（宽高比1.60），1680×945（宽高比1.77）
∙1920×1200（宽高比1.60），1920×1080（宽高比1.77）
∙2048×1536（宽高比1.33），
响应式布局使用的css技巧主要有：
1.百分比。
在设置元素的样式时，应使用百分比，而不是固定的数值，尤其是图片的缩放，更是使用百分比，如果需要可以设置max-width。
百分比的计算公式为：
目标元素宽度/ 上下文元素宽度=百分比宽度
如将固定宽度
3.媒体查询。
这也是响应式查询的重点，页面之所以能适应不同的窗体大小，也是因为媒体查询。
媒体查询理解起来非常简单，就是在不同的窗体下，定义不同的样式。
例如：
4.响应式布局兼容性。
手机浏览器都兼容响应式布局，电脑浏览器中最新浏览器支持。
ie8以下浏览器不支持，升级也比较麻烦。
网上也有技巧兼容ie8浏览器，不过我测试了一下，ie8下是妥协支持了，之所以说妥协，是因为有些效果也不支持，ie6,ie7基本都不支持。
尤其是让我生气的是，ie8妥协支持了，在chrome中有些效果感觉变形了。
哎，ie8浏览器还是放弃吧，毕竟是为手机用户开发。
响应式布局的开发基本上就是以上四点，在加上html5。
html5是进行页面布局的。
小如果需要加些特效，这时就可以使用jQuery。