工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录!

其实主要就是改掉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">

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

最后就是不要设置太大的具体宽度属性了,比如你在网页把Body的宽度属性设为1000px,这肯定是不行的了,但是可以设置为90% 或者 auto,这是屏幕自适应的。

-----------------------------------补充:我是快乐的分割线  ---------------------------------------------------

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

<!--[if lt IE 9]>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

相对大小的字体

字体也最好不要使用绝对大小(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文件。

<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: 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);
  });

不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

补充来源:自适应网页设计(Responsive Web Design)

【问题&解决】手机网页Html代码实现(解决显示页面很小的问题)的更多相关文章

  1. 手机网页Html代码实现(解决显示页面很小的问题)

    工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录! 其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: <meta name="viewport ...

  2. MAC 系统升级10.10以后PHP验证码错误的解决办法。[ 一行代码轻松解决! ]

    MAC 升级到10.10 以后PHP版本为5.5,初步判定是由于FreeType 字体库的原因,导致GD库有些问题,总之就是验证码出不来.很多大牛给出的办法是重新编译PHP,这对于手头有项目的人来说可 ...

  3. 解决h5网页微信分享链接不能显示缩略

    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js& ...

  4. mp4网页播放代码,有声音无图像的解决办法~

    mp4网页播放代码,有声音无图像的解决办法~     关于网页播放mp4格式的视频,找了一些插件,这里推荐一下video.js 官方网址:http://www.videojs.com/ github ...

  5. FIREMONEY手机虚拟键盘遮挡的解决

    FIREMONEY手机虚拟键盘遮挡的解决 尝遍了网上人们提供的N种方法之后,发现还是老猫的方法才是彻底解决问题的办法. 老猫“不看后悔XXX”--->RAD10.2.3 Flying Wang ...

  6. 使用history.back()出现"警告: 网页已过期的解决办法"

    原因: 表单提交页面中使用了 session_start 函数.由于我们后退浏览的是缓存页,而该函数会强制当前页面不被缓存. 解决: PHP: 此提示出现在一个POST提交的页面,点到其它页面后,通过 ...

  7. 关于github在mac 10.10上无法提交代码的解决办法---备用

    接下来是正文:本文主要说明在mac 10.10版本下github无法提交代码的问题 首先如果你是一个用终端提交代码的,你可以不用看这篇文章了,这篇文章主要是用于解决github客户端提交代码的问题,此 ...

  8. 【技术贴】解决myeclipse SVN 提交代码 commit:remains in tree-conflict错误的解决办法

    [技术贴]解决myeclipse SVN 提交代码 commit:remains in tree-conflict错误的解决办法 错误是:Aborting commit: xxxxx’ remains ...

  9. 【技术贴】解决myeclipse SVN 提交代码 commit:remains in tree-c

    [技术贴]解决myeclipse SVN 提交代码 commit:remains in tree-conflict错误的解决办法 错误是:Aborting commit: xxxxx' remains ...

随机推荐

  1. Swap Two Nodes in Linked List

    Given a linked list and two values v1 and v2. Swap the two nodes in the linked list with values v1 a ...

  2. RadioButtonList单选和RequiredFieldValidator验证是否选中

    <asp:RadioButtonList ID="Radio2" RepeatDirection="Horizontal" runat="ser ...

  3. iOS 和 Android 中的后台运行问题

    后台机制的不同,算是iOS 和 Android的一大区别了,最近发布的iOS7又对后台处理做了一定的更改,找时间总结一下编码上的区别,先做个记录. 先看看iOS的把,首先需要仔细阅读一下Apple的官 ...

  4. Simple Chroma Key 0.1.16 图片抠像(vs2003) 无任何插件

    学习扣像的最基础代码 (只支持 BMP TGA) simplechromakey.rar

  5. DP:Making the Grade(POJ 3666)

     聪明的修路方案 题目大意:就是农夫要修一条路,现在要求这条路要么就是上升的,要么就是下降的,总代价为∑|a[i]-b[i]|,求代价最低的修路方案, (0 ≤ β≤ 1,000,000,000) , ...

  6. Java 复制文件的高效方法

    转载自:http://jingyan.baidu.com/article/ff4116259c2d7712e4823780.html 在Java编程中,复制文件的方法有很多,而且经常要用到.我以前一直 ...

  7. ubuntu 图形界面查看隐藏文件

    在 Linux 下以 . 开头的文件或文件夹为隐藏文件,在图形界面(nautilus)下可用 CTRL + H 显示隐藏文件,终端下者可以用 ls -a 显示所有文件.

  8. 细胞分裂(codevs 2952)

    题目描述 Description 著名生物学家F博士发现了一种单细胞生物. 它长得像蚯蚓,分裂速度极快(每分钟一次),分裂也像蚯蚓一样,断成两段,再长成. 它很好斗,只要q只聚集在一起,就会q只一群打 ...

  9. exit()与_exit()函数的区别(Linux系统中)

    注:exit()就是退出,传入的参数是程序退出时的状态码,0表示正常退出,其他表示非正常退出,一般都用-1或者1,标准C里有EXIT_SUCCESS和EXIT_FAILURE两个宏,用exit(EXI ...

  10. nginx打开目录浏览

    server { listen 80; server_name localhost; index index.html index.htm index.php; autoindex on; #开启ng ...