ITPub博客

首页 > 应用开发 > IT综合 > 怎么设计手机网页的样式?小编带给你答案

怎么设计手机网页的样式?小编带给你答案

原创 IT综合 作者:TmanxbZZ 时间:2015-10-16 08:55:07 0 删除 编辑

一. 怎么允许网页宽度自动调整: "自适应网页设计"到底是怎么做

其实并不难。我也是从不会到会慢慢过来的, 首先,在网页代码的头部,加入一行viewport元标签。
<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),
原始缩放比 例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 对于viewport属性,我也是真正在接
触移动web开发是才遇到的,一般的ps布局都是固定的960px,1000px这种。

下面是对viewport属性详细的解释: Viewport(视区概念)——pc端的理解 Viewport(视区概念)——移动端的应用 viewport ——视区概念(转) 对于老式IE6,7,8浏览器需要js处理,由于主要平台是ios和安卓,所有可以暂时不考虑
  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)。


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/29698441/viewspace-1814430/ ,如需转载,请注明出处,否则将追究法律责任。

下一篇: 没有了~
请登录后发表评论 登录
全部评论

注册时间:2014-06-08

  • 博文量
    2
  • 访问量
    7733