手机网页制作需要注意的问题
来源:互联网 发布:postscript软件下载 编辑:程序博客网 时间:2024/05/01 02:09
一、 允许网页宽度自动调整
</head>之前添加代码:
<meta name="viewport" content="width=device-width, initial-scale=1" />
代码解释: iewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
二、需要注意的tag
1.width
width代表宽度,他的单位只能用相对百分比%,不能用绝对宽度单位px
2.font-size、font
font-size、font后面的属性值表示字体大小时,同样需要用em而不能用px
(其中em和px之间的换算是16倍关系)
三、流动布局(fluid grid) "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
流动布局的出现能使得手机网页的灵活自适应,所以经常会使用 float 设置浮动效果。
四、"自适应网页设计"的核心,就是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);
五、 图片的自适应(fluid image) 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放
img { max-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);
});
0 0
- 手机网页制作需要注意的问题
- 网页制作需要注意的问题集锦
- 网页制作中需要注意的问题
- 制作网页 完成后需要注意的编码问题
- 简单制作一个网页需要注意的
- 制作镜像需要注意的问题
- 手机网站开发需要注意的问题
- HTML网页制作时需要注意的技巧
- 制作 XPE 所遇到和需要注意的问题
- 手机client端测试需要注意的问题
- 手机网站开发中需要注意的7个问题
- 手机网站开发中需要注意的7个问题
- 安卓手机安全--目前需要特别注意的问题
- 手机上设置图片需要注意的问题
- CSS网页编码以前需要注意的十个问题
- python做网页爬虫需要注意的问题
- 网页制作中注意应用html标签的问题
- 需要注意的问题
- onmeasure方法里的参数说明以及用width和height中所需要注意的事项
- 安卓面向2017
- Hibernate设置时间戳的默认值和更新时间的自动更新
- 使用Jaspersoft Studio绘制报表
- 安装windows 7系统的流程及基本问题解决
- 手机网页制作需要注意的问题
- 拿什么拯救自己
- CMD进入MYSQL
- JenKins结合cppcheck及cpplint进行代码风格及静态代码检测
- float内存存储方式
- XSS类型
- Windows多显示器编程--VC 资料搜集
- MySql安装最后一步错误解决办法
- 怎么用MindManager进行项目管理