欢迎来到小鱼儿博客园学习基地，
  加我 QQ 说出您的需求！
1、在HTML头部增加viewport标签。
　　在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：
&meta name=&viewport& content=&width=device-width, initial-scale=1& /&
　　这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
　　例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divSidebar {
　　3、布局宽度使用相对宽度。
　 　网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
　　4、页面使用相对字体
　　在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。
　 　根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航 栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题（更新：经过网友提示，在导航栏divNavbar的样式里，加入 overflow: 一行即可解决这个问题）。
　　下图是使用iPhone访问的，经过修改CSS为自适应网页后的月光博客首页页面，看起来比原始的未页面好多了吧。
　　总之，根据上面四步进行修改的话，可以很简单地将一个网站修改为适合多种设备浏览的页面，这对于通过手机访问网站的用户来说，的确是一件好事。
以下是更详细的补充资料：
随着3G的普及，越来越多的人使用手机上网。
移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能&一次设计，普遍适用&，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
一、&自适应网页设计&的概念
2010年，Ethan Marcotte提出了&自适应网页设计&（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
mediaqueri.es上面有更多这样的例子。
这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、允许网页宽度自动调整
&自适应网页设计&到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行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。
　　&!--[if lt IE 9]&
　　　　&script src=&http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js&&&/script&
　　&![endif]--&
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
　　width:
只能指定百分比宽度：
　　width: xx%;
　　width:
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
　　body {
　　　　font: normal 100% Helvetica, Arial, sans-
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
　　　　font-size: 1.5
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
　　small {
　　　　font-size: 0.875
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
五、流动布局（fluid grid）
&流动布局&的含义是，各个区块的位置都是浮动的，不是固定不变的。
　　.main {
　　　　float:
　　　　width: 70%;
　　.leftBar {
　　　　float:
　　　　width: 25%;
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择加载CSS
&自适应网页设计&的核心，就是CSS3引入的Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
　　&link rel=&stylesheet& type=&text/css&
　　　　media=&screen and (max-device-width: 400px)&
　　　　href=&tinyScreen.css& /&
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
　　&link rel=&stylesheet& type=&text/css&
　　　　media=&screen and (min-width: 400px) and (max-device-width: 600px)&
　　　　href=&smallScreen.css& /&
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
　　@import url(&tinyScreen.css&) screen and (max-device-width: 400px);
七、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
　　@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float:
　　　　　　width:
　　　　#sidebar {
　　　　　　display:
上面的代码意思是，如果屏幕宽度小于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: }
或者，Ethan Marcotte的imgSizer.js。
　　addLoadEvent(function() {
　　　　var imgs = document.getElementById(&content&).getElementsByTagName(&img&);
　　　　imgSizer.collate(imgs);
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，端和客户端都可以实现。
「如果觉得我的文章对您有用的话，请随意打赏。为什么呢？」
使用微信扫描二维码完成支付
转载请注明： >
> 自适应网页设计的方法(手机端良好的访问体验)
与本文相关的文章
发表我的评论一个手机自适应的网页效果解决显示页面很小的问题
工作需要，要做一个手机自适应的网页效果，终于搞定，先分享并记录！ 其实主要就是改掉HTML页面声明： 在网页中加入以下代码，就可以正常显示了：
&meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/& 解释： width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 精简点的话，可以把上面的代码更改为以下代码，效果是一样的：
&meta content="width=device-width,user-scalable=no" name="viewport"& 最后就是不要设置太大的具体宽度属性了，比如你在网页把Body的宽度属性设为1000px，这肯定是不行的了，但是可以设置为90%，这是屏幕自适应的。 PS：本人做了个效果页面，可以用手机正常显示哦，
顶一下(0) 踩一下(0)
热门标签：进入2015年，手机上网的用户已经越来越多，已经赶超PC端。随着2G、3G、4G、免费WIFI和无线基站的不断普及，越来越多的人开始使用手机上网。
移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能&一次设计，普遍适用&，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
一、&自适应网页设计&的概念
2010年，Ethan Marcotte提出了&自适应网页设计&（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
mediaqueri.es上面有更多这样的例子。
这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、允许网页宽度自动调整
&自适应网页设计&到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行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。
&!--[if lt IE 9]&
&script src=&http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js&&&/script&
&![endif]--&
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
只能指定百分比宽度：
width: xx%;
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
font: normal 100% Helvetica, Arial, sans-
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
font-size: 1.5&
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
　　small {
font-size: 0.875
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
五、流动布局（fluid grid）
&流动布局&的含义是，各个区块的位置都是浮动的，不是固定不变的。
　　.main {
width: 70%;&
　　.leftBar {
width: 25%;
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择加载CSS
&自适应网页设计&的核心，就是CSS3引入的Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
　　&link rel=&stylesheet& type=&text/css&
media=&screen and (max-device-width: 400px)&
href=&tinyScreen.css& /&
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
　　&link rel=&stylesheet& type=&text/css&
media=&screen and (min-width: 400px) and (max-device-width: 600px)&
href=&smallScreen.css& /&
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
　　@import url(&tinyScreen.css&) screen and (max-device-width: 400px);
七、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
　　@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　#sidebar {
上面的代码意思是，如果屏幕宽度小于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: }
或者，Ethan Marcotte的imgSizer.js。
　　addLoadEvent(function() {
　　　　var imgs = document.getElementById(&content&).getElementsByTagName(&img&);
　　　　imgSizer.collate(imgs);
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
本文出处：，转载请注明出处（春哥QQ：
微信号：wocgtblog）Web Design & Development
US & Canada +1-877-WITMART(948-6278)China 950-
根据一个网站PC版本设计手机版自适应
Job Status:
Awarding Overdue
<img align="absmiddle" onmouseover="zbj.Module.showTip($(this))" title='Awarding Overdue - The Employer has not selected a winner(s) during the "Awarding" period. .' class="ml5" src="/p/main/img/ts.png" />
Bidding Started:
Payment Arrangment:&Quote freely
Bidding Ended:
Job description
已经现有PC版本，希望可以帮优化已经精美化。 同时设计PC版本在手机浏览时自适应手机。不要手机浏览时跳转到H5页面的版本。
网站临时域名：http://w6-/index.html
同时吧目前PC版本的底部的“如何预约向导 招募向导
如何预约体验 征集体验”这四项跳转到微信公众号页面的这四项，设置成网站的页面，而不是跳转。
New or existing website
Reference Website
Do you have all the content needed for the website?
Functions of website
Additional description：
Search engine optimization
To apply this job, providers need to submit:
- Quote & delivery time
- Previous works
Unread Private Message
Price from Higest to Lowest
Price from Lowest to Higest
Level from Higest to Lowest
Latest Bids First
Earliest Bids First
Personal Real Name Verified
This bid is sealed. Only Employer may view this bid. If you are the Employer of this job .
Bid feature:
Bid ID: 203353
Submitted: Jul 25,
Personal Real Name Verified
This bid is sealed. Only Employer may view this bid. If you are the Employer of this job .
Bid ID: 198639
Submitted: Jun 09,
Personal Real Name Verified
This bid is sealed. Only Employer may view this bid. If you are the Employer of this job .
Bid ID: 198643
Submitted: Jun 09,
Personal Real Name Verified
This bid is sealed. Only Employer may view this bid. If you are the Employer of this job .
Bid ID: 198675
Submitted: Jun 09,
Personal Real Name Verified
This bid is sealed. Only Employer may view this bid. If you are the Employer of this job .
Bid ID: 198740
Submitted: Jun 10,
Personal Real Name Verified
This bid is sealed. Only Employer may view this bid. If you are the Employer of this job .
Bid ID: 198750
Submitted: Jun 10,
This bid is sealed. Only Employer may view this bid. If you are the Employer of this job .
Bid ID: 199782
Submitted: Jun 24,
Company Real Name Verified
This bid is sealed. Only Employer may view this bid. If you are the Employer of this job .
Bid ID: 202865
Submitted: Jul 20,
The Bidding period has Expired
You cannot bid in this job because it's not open for bid at this moment, click the button to bid on other jobs similar to this one.
Don't have an account?
Custom services from millions of talents
Need to find jobs?
Get access to all jobs at Witmart and start to work.
Jobs you might be interested in:
| (70 hr left)
| (7 days left)
| (7 days left)
Award: More than US$5,000 | (28 days left)
| (10 days left)
| (10 days left)
Award: US$0 | (64 hr left)
Award: More than US$5,000 | (15 days left)
| (17 days left)
Award: US$500-US$1,000 | (20 days left)web应用的宽度和高度应该是多少？不能留白，是要布满屏幕的意思吗？这是我做的应用/ 提交时，反馈的邮件说宽度和高度不对，且没有宽度和高度自适应；我看了的调整高度api（/wiki/index.?title=%E5%B8%AE%E5%8A%A9%E6%96%87%E6%A1%A3%E9%A6%96%E9%A1%B5/%E7%A7%BB%E5%8A%A8web%E5%BA%94%E7%94%A8%E6%8E%A5%E5%85%A5/%E5%AF%B9%E6%8E%A5%E9%A1%BB%E7%9F%A5），但是水平不够还是不清楚应该怎么操作，有没有简单易懂的方法？
--------------------------------------
我也水平不够，帮不了你。求高手现身解答~~
--------------------------------------
我查了下，需要是用CSS中的div+css布局之流体定位布局。找到了示例的：float.html&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"&&html&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312"&&title&流体定位布局2&/title&&link rel="stylesheet" type="text/css" href="http://s.yanghao.org/program/style.css"&&/head&&body&
&div id="header"&
&h1&这里是标题&/h1&
&div id="nav"&
&li&新闻&/li&
&li&杂志&/li&
&li&电影&/li&
&div id="main"&
&p&对于ASP.NET而言，人员不可避免的会将ASP.NET与ASP进行比较，因为ASP.NET可以算作是ASP的下一个版本。但是ASP.NET却与ASP完全不同，可以说重新将ASP进行编写和组织形成ASP.NET技术。 &/p&
&p&在传统的ASP中，开发人员可以在页面中进行ASP代码的编写，当请求相应的页面时，服务器会解析ASP代码进行页面呈现。ASP具有轻巧等特点，但是随着的发展，ASP也越来越多的呈现出其不足之处，这些不足之处包括ASP代码无法和HTML代码很好的分离，这就造成了页面代码混乱、维护性低等情况。当ASP中出现错误或者需要进行功能的添加，就需要多大部分的页面进行更改，这样就降低了ASP的复用性和维护性。&/p&
&p&对于ASP.NET而言，开发人员不可避免的会将ASP.NET与ASP进行比较，因为ASP.NET可以算作是ASP的下一个版本。但是ASP.NET却与ASP完全不同，可以说重新将ASP进行编写和组织形成ASP.NET技术。 &/p&
&p&在传统的ASP开发中，开发人员可以在页面中进行ASP代码的编写，当服务器请求相应的页面时，服务器会解析ASP代码进行页面呈现。ASP具有轻巧等特点，但是随着互联网的发展，ASP也越来越多的呈现出其不足之处，这些不足之处包括ASP代码无法和HTML代码很好的分离，这就造成了页面代码混乱、维护性低等情况。当ASP中出现错误或者需要进行功能的添加，就需要多大部分的页面进行更改，这样就降低了ASP的复用性和维护性。 &/p&
&p&相对于ASP而言，ASP.NET具有更加完善的开发工具。在传统的ASP开发中，可以使用Dreamware、FrontPage等工具进行页面开发。当时使用Dreamware、FrontPage等工具进行ASP开发时，其效率并不能提升，并且这些工具对ASP应用程序的开发和运行也不会带来性能提升。 &/p&
&p&相比之下，对于ASP.NET应用程序而言，微软开发了Visual Studio开发环境提供给开发人员进行高效的开发，开发人员还能够使用现有的ASP.NET控件进行高效的应用程序开发，这些控件包括日历控件、分页控件、数据源控件和数据绑定控件。开发人员能够在Visual Studio开发环境中拖动相应的控件到页面中实现复杂的应用程序编写。 &/p&
&div id="navr"&
&li&新闻&/li&
&li&杂志&/li&
&li&游戏&/li&
&li&音乐&/li&
&li&电影&/li&
&li&娱乐&/li&
&div id="footer"&
&p&版权所有，翻版必究&/p&
&/body&&/html&style.css/* CSS Document */*{
padding:0;}body{
margin:10}#header{
line-height:60
font-size:16
background:#
margin-bottom:10}#header h1{
text-align:}#nav{
width:20%;
padding:10
left:10}#nav ul{
text-align:
list-style-type:}#main{
width:54%;
margin-left:23%;
margin-right:23%;
margin-bottom:10}#main p{
text-indent:32
line-height:150%;
word-spacing:2}#navr{
width:20%;
padding:10}#navr ul{
text-align:
list-style-type:}#footer{
background:#
line-height:60
margin-top:10}#footer p{
text-align:}引用地址：/zfc2201/archive//2147088.html代码可以看懂，但是对div+css布局之流体定位布局这个东西的实质还是不清楚，是用比例代替宽度么？
--------------------------------------
千万不要沉了，求高手解答！！
无相关信息