自适应网站设计案例（网站怎么做到自适应网页）

本文目录

• 网站怎么做到自适应网页
• 如何设计自适应屏幕大小的网页 Responsive Web Design
• 大屏网页设计-如何设计自适应屏幕大小的网页ResponsiveWebDesign
• 如何进行自适应网页设计
• 怎么把网站做成自适应怎么把网站做成自适应窗口
• 分享网页设计的案例分析

网站怎么做到自适应网页

关于网站如何做到自适应网页，可根据如下操作：

首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩 放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。

“自适应网页设计”的核心，就是CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

其次，除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

如何设计自适应屏幕大小的网页 Responsive Web Design

手机的屏幕比较小，宽度通常在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张图片分成三行。
如何设计自适应屏幕大小的网页(转)
mediaqueri.es上面有更多这样的例子。
这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、允许网页宽度自动调整
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。
《meta name=”viewport” content=”width=device-width, initial-scale=1″ /》
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

大屏网页设计-如何设计自适应屏幕大小的网页ResponsiveWebDesign

网页设计教程设置网页步骤

1、打开PS,新建空白文档,名称设置为“某某工作室”,从预设大小下拉列表中选择“1024x768”,模式设计为“RGB颜色”,内容设置为“白色”,点击“好”按钮完成文档的创建工作。

2、新建一名称为“框架”的图层,利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”,然后将矩形的宽度设置为1024,高度设置为80,在文档的上下两侧各框选一部分内容并填充为黑色,从而使整个网页呈现“宽屏幕”效果。

3、在背景图层的上方新建一新图层,并命名为“背景颜色”。点击“矩形选择工具”,设置“宽度为400,高度为768,然后在窗口的左侧框选一部分内容,填充一种深绿色。然后点击“矩形选择工具”,设置“宽度为624,高度为768,然后在窗口的右侧框选一部分内容,填充一种浅绿色。填充两种颜色饱和度有一点差别的颜色,目地是产生较为明显的对比。

4、在“框架”图层之上再新建一图层,名称为“主体元素”。打开一张事先准备好的百合花图片,双击“背景”图层将其转换为“图层0”,点击“魔术棒”工具,在图片白色区域内点击,选择白色区域后,按下DEL键删除白色区域。然后拖放图片到图层“主体元素”上。

5、然后选择“矩形选择工具”,设置“宽度为624,高度为768,然后在窗口中选择花朵右侧的一部分内容,并调整其亮度和对比度,使花朵的左右两侧呈现明显的对比。对该页面进行细节的调整,增加一些导航栏,信息提示内容和版权信息等内容,最终制作完成的页面。

6、选择“切片”工具,然后对内容进行切分。切分的好处是有利于文件在网络上传输,同时在用切片工具划分内容时最好将需要被文字内容替换的部分进行独立分割。分割完成后的效果。

7、找到保存文件的位置,打开某某工作室.html文件,然后在内容区域内点击鼠标右键,选择“查看源文件”,就会发现对应的网页内容已经生成。至此,利用PS设计网页内容完成。

最好控制在1000px吧,因为还有很多用户用的是分辨率很低的,如果你的用户都是用的大屏浏览器,那么就可以宽一点,比如你的客户是跟网站、设计类有关的,那么他们电脑的分辨率不会低的,至少是1440px,所以你可以先确定你用户的电脑大致分辨率的多大,再考虑宽度尺寸

手机的屏幕比较小,宽度通常在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),需要使用。

“自适应网页设计”到底是怎么做到的?其实并不难。

首先,在网页代码的头部,加入一行viewport元标签。

《meta

name=”viewport”

content=”width=device-width,

initial-scale=1″

/》

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用。

如何进行自适应网页设计

做网站让页面自适应大小方法代码如下：

一、电脑站设置网站自适应方法

全屏宽度主要在于CSS代码中，将width为100%，而不是一个固定的像素值，代码如下。

手机网设置网自适应方法：

在网页头部加上这样一条meta标签：《meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /》 

解释：

怎么把网站做成自适应怎么把网站做成自适应窗口

网站如何适应网页？

首先，在网页代码的头部添加一行viewportmeta标签。Viewport是网页的默认宽度和高度。上面的代码意味着网页的默认宽度等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页的初始大小占屏幕面积的100%。

因为网页的布局会根据屏幕宽度进行调整，所以不能使用绝对宽度的布局或绝对宽度的元素。这个很重要。

“流动布局”的意思是每个区块的位置是浮动的，而不是固定的。浮动的好处是，如果宽度太小，装不下两个元素，后面的元素会自动滚动到前面元素的底部，不会水平溢出，避免了水平滚动条的出现。

“自适应网页设计”的核心是CSS3引入的媒体查询模块。意思是自动检测屏幕宽度，然后加载相应的CSS文件。在同一个CSS文件中，还可以根据不同的屏幕分辨率选择应用不同的CSS规则。

其次，自适应网页设计除了布局和文字，还必须实现图片的自动缩放。有条件的话，根据屏幕大小不同，加载不同分辨率的图片更好。有很多方法可以做到这一点，服务器端和客户端都可以实现。

网站怎么做到自适应网页？

关于网站如何做到自适应网页，可根据如下操作：首先，在网页代码的头部，加入一行viewport元标签。

如何让网页在浏览器自适应屏幕大小？

想要网页宽度自适应，需要把网页元素宽度设置为百分比，还要在网页头部加上代码：metaname="viewport"content="width=device-width,initial-scale=1.0"/》。图片自适应，且不超过原始大小，需要设置最大宽度，代码如下：img{width:100%;max-width:100%;}。

网页上部分标题怎么自适应分辨率？

1、双击打开AxureRP8设计软件，在基本元件中拖曳一个矩形1到画布上。

2、再次在基本元件里拖曳两个按钮到画布上，放在矩形框上方。

3、再拖曳一个占位符到矩形框下方。

4、在右侧属性里自适应勾选“启用”，弹出“影响所有视图”。

5、点击左侧自适应按钮，弹出自适应视图，分别设置手机、平板和电脑分辨率的范围。

6、这时界面上显示出不同分辨率界面，然后预览该界面。

分享网页设计的案例分析

在我们美丽的地球村里,绿色随处可见,如草、叶等的绿。绿色象征着生命、青春与和平。绿色,是一种中性色,介于黄色与蓝色之间,是最适合人眼注视的色彩。由于接近自然的特性,绿色给人沉稳、平静、舒适的感觉。因此,绿色也是在网页设计中使用得最广泛的颜色之一。下面笔者就通过不同的绿色搭配方式来分析下绿色在网页设计中的色彩和文字颜色搭配。 绿色设计可以结合任何其他颜色,纹理和阴影,可以直观地改变用户的印象。添加纹理可以使颜色变暗,光滑的表面纹理则更加丰富性和富有深度。 1.绿色+白色+暗红色 如下图所示,主色调、辅色调HSB模式的数值可看出,主色调与辅色调是同一种色,只是在明度上有所不同,让页面多了些空间感、层次感。由于绿色本身的特性,所以整个网页看起来很清爽舒适。中间使用白色块面,拉开了两种绿色之间距离,增加了视觉节奏感。点晴色暗红色的加入为网页增添了一分光彩,极具诱惑感,页面瞬间活跃提神了不少,使得整个页面配色清新爽朗。 2.绿色同类色+多种点睛色 上图中用色较多,主色调为明度稍低的黄绿色,辅助色则为高明度的黄绿色,二者形成强烈反差,增加了页面层次感。此图的点晴色有4种,包括红色与主色调绿色、蓝色与橙红色,二者互相形成对比色。虽说点晴色较多,但都按色相环顺序出现在页面上,形过一个缓和的过渡效果,让人感觉到舒服而非突兀。整个页面色彩谐调,重点突出,层次分明,热闹多彩又不失井然有序。这样的网页配色方案的设计适用于小清新类的服装网站。现今的小清新取景都倾向于海边、公路,若是主色调仍是以白色、黄粉色为主,则会显得单调枯燥。在此笔者建议可以试试看绿色加上多色点睛色的配色方案,你会大有收获。 3.突出绿色+强暗色系 此图中大家一眼就能看出位于正中间的绿色植物,与周围纯度很高的黑色相比,这样的绿色显得醒目,形成鲜明的刺激对比。这两组色彩虽然不是严格意义上的对比色,但足够在页面中形成鲜明对比,整个页面瞬间被烘托得鲜活起来。就像是在油锅中加入水滴一样,瞬间显得生动,有效地突出网页前景。整个页面显得通透鲜活,主题鲜明。此外,加入了棕色和白色的,耀眼的绿色得到平衡,起到舒缓视觉的效果,有效平衡了绿色与暗黑色的强烈对比较果。 结论: 中国人普遍认为绿色是青春,向上,活力的代表,在网页设计中也越来越多的运用绿色系,以显示网页设计的年轻的生命力。运用绿色系,在第一时间给人健康、成熟、稳重、开阔的心理感受,传递网站正能量。运用绿色系配色方案的还有很多,站长朋友们不妨多去设计类的网站浏览,寻找灵感。