网页设计中如何让网页自动适应屏幕
- 格式：docx
- 大小：249.39 KB
- 文档页数：7
文档推荐
-
一些网页设计小代码页数:6
-
前端网页设计代码大全页数:37
-
自适应网页设计的步骤页数:1
-
Web页面设计规范页数:37
-
网页设计介绍页数:17
-
网页自适应手机以及各种屏幕页数:8
-
如何让网页自适应电脑屏幕分辨率页数:2
下载文档原格式
合集下载
利用Dreamweaver创建自适应网页的技巧
利用Dreamweaver创建自适应网页的技巧第一章：什么是自适应网页自适应网页是根据不同设备的屏幕尺寸和分辨率，自动调整布局和内容以实现最佳的用户体验。
传统的网页设计是针对特定的分辨率和设备进行布局设计，而自适应网页则具备了跨设备平台的优势。
第二章：Dreamweaver介绍Dreamweaver是一款专业的网页设计工具，由Adobe公司开发。
它提供了直观的界面和丰富的功能，可帮助用户轻松创建自适应网页。
Dreamweaver集成了代码编辑器、可视化设计工具和实时预览功能，为开发者提供了全面的支持。
第三章：创建基础布局在Dreamweaver中创建自适应网页的第一步是设计基础布局。
通过使用网格系统和流式布局，可以确保网页在不同的屏幕尺寸下保持一致的外观和排版。
在Dreamweaver中，可以使用CSS框架来简化布局的设计过程。
第四章：使用媒体查询媒体查询是实现自适应网页的重要技术之一。
通过在CSS中添加媒体查询规则，可以根据设备的特性来调整网页的样式和布局。
Dreamweaver提供了方便的工具和界面，让用户可以轻松地应用媒体查询并预览不同分辨率下的网页效果。
第五章：图像和媒体的处理在设计自适应网页时，图像和媒体元素需要根据屏幕尺寸进行适当的调整。
Dreamweaver提供了自动调整大小的功能，可以根据媒体查询和CSS规则来调整图像和媒体元素的大小和位置。
此外，Dreamweaver还可以优化图像和媒体文件以提高网页的加载速度。
第六章：响应式类型和字体字体在自适应网页设计中也起着重要的作用。
Dreamweaver支持使用响应式字体和单位，以确保文字在不同屏幕上的清晰度和可读性。
此外，Dreamweaver还提供了多种可视化工具和选项，帮助用户在设计过程中选择最合适的字体和排版方式。
第七章：导航和用户体验自适应网页的导航栏设计需要考虑不同屏幕上的显示和交互方式。
Dreamweaver提供了各种导航模板和设计工具，可以根据不同屏幕尺寸和设备类型自动生成适应性导航栏。
页面自适应原则 -回复
页面自适应原则-回复页面自适应原则，也称响应式设计，是一种使网页布局能根据不同设备或浏览器自动调整的设计原则。
随着不同的设备和屏幕尺寸的增加，如手机、平板电脑和笔记本电脑等，保证网页在各种设备上都能良好地显示和操作变得越来越重要。
页面自适应原则旨在提供用户友好的体验，无论用户所使用的设备尺寸和屏幕分辨率如何，网页都能自动适应最佳布局。
页面自适应原则主要包括以下几个方面：1. 弹性布局：弹性布局是指使用相对单位（如百分比）而非固定单位（如像素）来设置宽度、高度和位置。
相对单位可以根据屏幕尺寸和设备分辨率自动调整，从而实现页面的伸缩性。
通过使用弹性布局，网页可以根据不同的设备自动调整大小，使内容在各种分辨率下都能清晰可见。
2. 媒体查询：媒体查询是一种CSS3的功能，它可以根据不同设备的特性和属性设置不同的样式。
通过使用媒体查询，开发人员可以针对不同设备设置不同的布局和样式，从而实现页面的自适应。
例如，可以根据屏幕宽度来设置导航栏的显示方式，使其在手机上以菜单形式显示，在平板和电脑上以水平导航的形式显示。
3. 图片和媒体的优化：为了适应不同设备的显示和加载速度，页面自适应原则还包括对图片和媒体的优化。
可以使用响应式图片技术来根据设备分辨率加载适当大小的图片，从而减少加载时间和带宽消耗。
同时，还可以使用HTML5的video和audio标签来适应不同浏览器和设备对多媒体内容的支持，提供更好的用户体验。
4. 流体网格布局：流体网格布局是指使用百分比和相对单位来设置网页的布局，使其能够在不同设备上自动适应。
通过将网页划分为多个区域，并设置其宽度为百分比，可以使网页在不同设备上自动调整布局，从而适应不同的屏幕尺寸和分辨率。
5. 触摸和手势支持：随着触摸屏设备的普及，页面自适应原则还需要考虑对触摸和手势的支持。
例如，在手机上可以将菜单设置成可滑动的形式，用户只需滑动屏幕就能打开或关闭菜单，提供更好的操作体验。
如何使网页自适应电脑屏幕分辨率？
如何使⽹页⾃适应电脑屏幕分辨率？如何使⽹页⾃适应电脑屏幕分辨率?在1024*768或者800*600的分辨率下可以⾃动调整成适⽤于该客户端分辨率的⼤⼩。
第⼀种⽅法：做⼀个⽹页解决问题（长了点） 如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使⾃⼰精⼼制作的⽹页变得"⾯⽬全⾮"，那多令⼈沮丧！下⾯我们以⽹页爱好者的常⽤⼯具Dreamweaver（以下简称DW）为例，列出⼏个⽹页制作初学者较常见的⽹页布局问题以及解决⽅法，希望对初学者们有所帮助。
⼀、消除任意缩放浏览器窗⼝对⽹页的影响 ⼀番⾟苦做出来的⽹页，在全屏状态下浏览⼀切正常。
但在改变浏览窗⼝⼤⼩之后，⽹页就变得"不堪⼊⽬"了，这是个很值得注意的问题。
问题的根源还得从⽹页的布局说起，在DW中，⽹页内容的定位⼀般是通过表格来实现的，解决表格的问题也就成功了⼤半。
⼤家应该注意到，在DW中表格属性⾯板的⾼宽设定选择上提供了两种不同类型：百分⽐和像素值。
百分⽐的使⽤将会产⽣前⾯说到的那个⽑病。
这⾥所说的百分⽐是指表格的⾼或宽设置为上层标记所占区域⾼或宽的百分⽐，如在⼀个表格单元的宽度是600，在它⾥⾯嵌⼊了另外⼀个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在⼀个表格不是嵌于另⼀个表格单元中，则其百分⽐是相对于当时窗⼝的宽度的。
IE浏览器中，随便改动主页窗⼝的⼤⼩时，表格的内容也随之错位、变形，就是因为表格的百分⽐也要随着窗⼝的⼤⼩⽽改变成相应的百分⽐宽度。
⾃然，解决这个问题的办法就是将表格宽度设置成固定宽度（也就是像素值）。
另外如果外层表格已做好固定宽度设置，内层表格也可以适当使⽤百分⽐设置。
清楚这个原则以后，如果出现类似的问题⼤家也知道怎么解决。
⼆、让⽹页居中 说到了窗⼝⼤⼩就会顺着路⼦想到分辨率的问题，在800×600分辨率下制作的⽹页在1024×768分辨率的机器上打开，整个⽹页就会跑到左边；1024×768分辨率的⽹页在800×600分辨率的机器上有时也会变得"不堪⼊⽬"。
前端设计中的适配性设计指南让网页在不同分辨率下展现完美效果
前端设计中的适配性设计指南让网页在不同分辨率下展现完美效果随着移动设备和不同屏幕分辨率的普及，前端设计中的适配性设计变得愈发重要。
在不同分辨率下，网页应该能够展现完美的用户体验，不受分辨率的限制。
本文将介绍一些关于前端设计中的适配性设计指南，帮助开发人员创建适应不同设备和分辨率的网页。
1. 使用响应式设计响应式设计是一种能够自动适应不同设备和分辨率的设计方法。
通过使用媒体查询和CSS3的弹性布局，网页可以在不同分辨率下进行优雅的响应。
建议在设计过程中采用响应式设计，以确保网页在不同设备上都能够呈现出最佳的效果。
2. 使用流体布局流体布局是一种基于比例和相对单位的网页布局方法。
相对于固定像素的布局，流体布局可以根据设备的大小和分辨率进行伸缩，使网页内容能够自动适应不同的屏幕。
使用流体布局可以确保网页在不同分辨率下展现出一致的外观和布局。
3. 缩放适配缩放适配是一种在不同分辨率下控制网页缩放比例的方法。
通过指定视口的大小和缩放级别，可以确保网页在不同设备上以合适的比例进行展示。
合理地设置缩放适配可以解决网页在高分辨率设备上显示过小或者变形的问题。
4. 图片适配在不同分辨率下，图片的大小和清晰度往往存在问题。
为了确保图片在不同设备上有良好的展示效果，可以采用以下几种方法： - 使用矢量图形：矢量图形可以无损地进行放大和缩小，适应不同分辨率的需求。
- 使用响应式图片：通过使用srcset和sizes属性，可以根据设备的屏幕宽度选择不同尺寸的图片。
5. 文本适配在不同分辨率下，文本大小的合适性需要特别关注。
如果文本过小或过大，都会影响用户的阅读体验。
为了确保文本在不同设备上可读性良好，可以采用以下几种方法：- 使用相对单位：相对单位（如em、rem）可以根据设备的大小进行自适应调整，保证文本大小的合适性。
- 使用媒体查询：通过媒体查询可以根据设备的屏幕宽度设置不同的文本大小。
6. 触摸适配在移动设备上，触摸操作是主要的用户交互方式。
HTML+Css让网页自动适应电脑手机屏幕
HTML+Css让⽹页⾃动适应电脑⼿机屏幕<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />在⽹页的<head>中增加以上这句话，可以让⽹页的宽度⾃动适应⼿机屏幕的宽度,其中：width=device-width ：表⽰宽度是设备屏幕的宽度height=device-height ：表⽰宽度是设备屏幕的宽度initial-scale=1.0：表⽰初始的缩放⽐例(初始规模为1.0倍，即原始⼤⼩)minimum-scale=0.5：表⽰最⼩的缩放⽐例maximum-scale=2.0：表⽰最⼤的缩放⽐例user-scalable=yes或者1：表⽰⽤户是否可以调整缩放⽐例(no或者0：表⽰不可调整缩放⽐例)target-densitydpi:⼀个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英⼨点的数量（dpi）。
Android⽀持三种屏幕像素密度：低像素密度，中像素密度，⾼像素密度。
⼀个低像素密度的屏幕每英⼨上的像素点更少，⽽⼀个⾼像素密度的屏幕每英⼨上的像素点更多。
Android Browser和WebView默认屏幕为中像素密度。
下⾯是 target-densitydpi 属性的取值范围:device-dpi –使⽤设备原本的 dpi 作为⽬标 dp。
不会发⽣默认缩放。
high-dpi – 使⽤hdpi 作为⽬标 dpi。
中等像素密度和低像素密度设备相应缩⼩。
medium-dpi – 使⽤mdpi作为⽬标 dpi。
⾼像素密度设备相应放⼤，像素密度设备相应缩⼩。
这是默认的target density.low-dpi -使⽤mdpi作为⽬标 dpi。
自适应网页设计的技巧与方法
自适应网页设计的技巧与方法随着移动设备的普及，越来越多的用户在手机和平板电脑上访问网页。
这使得网页设计师需要采用自适应网页设计来确保网站能够适应不同屏幕大小和分辨率的设备。
在这篇文章中，我们将介绍一些自适应网页设计的技巧和方法，帮助您创建出适用于不同设备的网站。
1.选择合适的字体大小和类型无论何时，网页设计都需要考虑实际用户的需求。
在移动设备上访问网页时，往往会出现用户需要放大界面才能看清网页文字和图像的情况。
因此，您需要选择合适的字体大小和类型，以确保用户能够清晰地阅读网页上的内容。
除此之外，还需要考虑用户的习惯和喜好，选择符合其口味的字体类型。
2.优化网页布局在设计自适应网页时，网页的布局也需要考虑到屏幕大小和分辨率的适应性。
屏幕较小的设备上，页面的内容需要进行优化，以确保内容不至于混乱而难以分辨。
为此，可以缩小底部、边框和条纹等元素，将空间释放给内容。
当然，还可以通过菜单等交互模块的折叠，使页面信息更加集中，并且可以在需要的时候进行展开。
3.合理使用图片对于网页上的图片也需要进行优化。
图片过大会导致加载速度慢，影响用户体验，我们可以获得更具表现力的展示效果，通过使用图片的元数据（如高宽属性、css 样式表、媒体查询等）来控制图片的加载大小来达到充分的图像资产利用目的。
同时，使用矢量图形能够在不损失画质的情况下达到网页对不同设备及屏幕分辨率的适应性。
4.响应式设计和弹性，对于不同的设备和屏幕预置不同的布局响应式设计是自适应网页设计的一种形式，它可以根据设备的尺寸和分辨率等参数，动态地改变布局来适应不同的屏幕大小和设备类型。
弹性网页布局适用于浏览器窗口大小可变的场合，可以根据浏览器窗口宽度来自适应改变其它元素的尺寸，以便在不同分辨率上展示适宜的视觉效果。
5.利用JavaScript自动适应大小对于某些网页元素，如模态框、导航条和轮播组件等，可能需要自适应的变化大小，此类组件需要使用JavaScript脚本来控制它们的展示大小，以便于在不同设备的屏幕上展示的效果更佳。
自适应网页设计的方法
自适应网页设计的方法自适应网页设计是一种能够根据用户使用的设备和屏幕尺寸自动调整布局和展示效果的网页设计方法。
随着移动设备的普及和不同尺寸屏幕的出现，传统的固定网页设计已经无法满足用户需求，因此自适应网页设计的方法变得越来越重要。
下面我将介绍几种常用的自适应网页设计方法。
1. 媒体查询（Media Queries）媒体查询是CSS3中的一项功能，通过查询设备的宽度、高度、分辨率等特性来调整网页的样式。
通过使用不同的CSS样式表，可以为不同的设备提供不同的布局和样式。
例如，可以为PC设备提供一个宽屏布局，而为手机设备提供一个垂直布局。
2. 弹性布局（Flexible Layout）弹性布局是一种使用相对单位（如百分比）而不是固定单位（如像素）来设计网页的方法。
通过设置元素的宽度、高度和间距为相对单位，可以使元素的大小随着屏幕尺寸的改变而自适应调整。
例如，可以使用弹性盒模型（Flexbox）来实现自适应布局。
3. 栅格布局（Grid Layout）栅格布局是一种将网页划分为等宽的列和行的方法，通过栅格系统可以方便地实现自适应网页布局。
通过定义不同设备尺寸下的栅格布局和列宽比例，可以使网页在不同设备上显示相同的布局效果。
例如，可以使用Bootstrap等前端框架提供的栅格系统来实现自适应布局。
4. 图片和媒体自适应在自适应网页设计中，图片和媒体（如视频和音频）的自适应也是一个重要考虑因素。
可以通过使用CSS属性（如max-width）或者使用媒体查询来根据设备尺寸调整图片和媒体的大小。
同时，还可以使用响应式图片技术（如srcset和sizes属性）来根据设备的像素密度和屏幕尺寸加载适合的图片。
5. 响应式文本和字体在自适应网页设计中，文本和字体也需要根据设备尺寸进行自适应调整。
可以使用相对单位（如em、rem）来设置文本和字体大小，这样可以使文本和字体大小跟随其父元素的大小进行自适应调整。
同时，还可以使用CSS3中的字体自适应属性（如font-size-adjust）来根据设备像素密度调整字体大小。
vue自适应页面的几种方法
vue自适应页面的几种方法全文共四篇示例，供读者参考第一篇示例：一、媒体查询媒体查询是一种在CSS中使用的强大功能，可以根据设备的屏幕尺寸、分辨率等特性来调整页面的样式。
在Vue中，可以通过在组件中的style标签中引入媒体查询来实现页面的自适应。
例如：```<style>@media screen and (max-width: 768px) {.content {width: 100%;}}</style>```通过这种方式，可以在不同屏幕尺寸下调整元素的样式，实现页面的自适应效果。
二、flex布局flex布局是一种CSS3中新增的布局模式，可以快速实现页面的自适应。
在Vue中，可以通过设置元素的flex属性来控制元素在容器中的布局方式。
例如：通过设置flex属性，可以让元素在容器中自动调整位置和大小，实现页面的自适应布局。
三、rem单位rem单位是相对于根元素（html）的字体大小的单位，在移动端开发中常用来实现页面的自适应。
可以通过设置根元素的字体大小，然后使用rem单位来设置元素的大小。
在Vue中，可以通过设置全局样式来实现rem单位的使用。
例如：通过设置全局样式来控制页面的字体大小，再使用rem单位来设置元素的大小，可以实现页面的自适应效果。
四、第三方库除了以上几种方法，还可以通过引入第三方库来实现页面的自适应。
可以使用Bootstrap等前端框架提供的栅格系统来快速实现响应式布局，或者使用amfe-flexible等库来处理移动端适配的问题。
这些库都提供了丰富的功能和组件，可以快速实现页面的自适应效果。
在移动互联网时代，页面的自适应已经成为一个必备的技能。
通过媒体查询、flex布局、rem单位等多种方式，可以在Vue中实现页面的自适应，让页面在不同尺寸的设备上都能够正常显示和操作。
也可以借助第三方库来加快开发效率，实现更加复杂和高效的页面自适应效果。
希望以上几种方法能够帮助到你，实现优秀的自适应页面设计。
如何使用Dreamweaver设计自适应网页
如何使用Dreamweaver设计自适应网页1. 简介自适应网页设计是指网页能够在不同设备上自动适应不同的屏幕尺寸和分辨率，以提供更好的用户体验。
Dreamweaver是一款流行的网页设计工具，具有强大的自适应网页设计功能。
本文将介绍如何使用Dreamweaver设计自适应网页。
2. 设置页面宽度在使用Dreamweaver设计自适应网页之前，首先要设置页面宽度。
打开Dreamweaver，选择"文件"菜单下的"新建"选项。
在弹出的对话框中，选择所需页面的尺寸或自定义页面宽度，并设置响应页面的最小宽度。
这样可以确保在不同设备上能够正确显示网页内容。
3. 使用媒体查询媒体查询是一种CSS技术，可以根据媒体类型和特定的条件来应用样式，从而实现自适应网页设计。
在Dreamweaver中，可以使用CSS规则窗口来添加媒体查询。
选择页面中的元素，点击底部工具栏上的"样式"按钮，打开CSS规则窗口。
在CSS规则窗口中，选择"新样式"按钮，选择"媒体查询"选项。
填写媒体查询的条件和对应的样式，如屏幕宽度小于600像素时应用的样式。
通过添加多个媒体查询，可以为不同的屏幕尺寸设置不同的样式。
4. 使用弹性布局弹性布局是一种可以根据容器的大小自动调整元素大小和位置的布局方式。
在Dreamweaver中，可以使用CSS规则窗口或者拖拽工具栏上的布局工具来创建弹性布局。
选择页面中的容器元素，点击底部工具栏上的"样式"按钮，打开CSS规则窗口。
在CSS规则窗口中，选择"新样式"按钮，选择"弹性容器"选项。
设置容器的属性，如flex-direction（主轴方向）、justify-content（元素在主轴上的对齐方式）和align-items（元素在交叉轴上的对齐方式）等。
网页自适应解决方案、
在网页设计中，我们会遇到将做好的页面放在不同的机器上会出现错位、偏离等问题，远远超出了自己的想法。
1.改绝对值为相对值
一般来讲，我们在写代码的时候会将页面的宽度设为一个固定值，如：
div{width:600px;height:800px;}//设置div 的宽度为600像素，高度为800像素。
然而为了让页面能够在不同的用户界面显示相同的效果，在这里我们就可以采用
屏幕自适应方法进行设置。
其方法是修改width的绝对值为相对值，代码如下：
div{width：600%；height:800px;} //设置div 的宽度值为body宽度的600%。
由于宽度值的父容器是body，所以我们可以直接采用父容器为参照物，进行相对值设置，这样就可以解决页面的宽度自适应问题了。
高度自适应问题代码如下：
html body{ margin:0px;hekght:100%}//设置父容器属性；div{width：600%；height:100%;}//设置相对值；
2.设置布局方式（流式布局）
流式布局即为每个块都是可以动态改变的，即采用float属性；关键代码如下：
div{float：right；width：70%；}//设置div为右浮动；
这样如果水平宽度不可以同时装下两个div的话，第二个div就会主动下滑到第一个的下面，不影响页面信息的传达。
其他的方法有：选择根据屏幕宽度加载不同的css样式；允许网页自动调整宽度等等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计中如何让网页自动适应屏幕（Responsive Web Design）
随着大屏智能手机和3G的普及，越来越多的人使用手机上网。
移动设备正超过桌面设备，成为访问互联网的最常见终端。
于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页内容？
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是
1366×768），有的还达到了2000像素。
同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。
这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
一、"自适应网页设计"的概念
2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例，里面有六个人的头像。
如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
二、允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。
对于那些老式浏览器（主要是IE6、7、8），需要使用
css3-mediaqueries.js。
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。
这一条非常重要。
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比宽度：
width: xx%;
或者
width:auto;
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
五、流动布局（fluid grid）
"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow （溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择加载CSS
"自适应网页设计"的核心，就是CSS3引入的Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
七、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
八、图片的自适应（fluid image）
除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码：
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。
这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。
有很多方法可以做到这一条，服务器端和客户端都可以实现。