为了账号安全,请及时绑定邮箱和手机立即绑定

H5手机自适应浏览器兼容该如何解决

H5手机自适应浏览器兼容该如何解决

fengzi555 2016-08-05 10:28:56
查看完整描述

2 回答

?
blovetu

TA贡献319条经验 获得超234个赞

1.首先,在<head>里加入一行viewport元标 签。<meta name=”viewport”content=”width=device-width, initial-scale=1″ />viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩 放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

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

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

4.移动端的单位一般都是用rem,em和 %,但你一定要分清rem和em之间的区别再用


查看完整回答
反对 回复 2016-08-05
  • fengzi555
    fengzi555
    自适应用的MEDIA但是 在屏幕小的手机上还是出问题了 怎么办
  • blovetu
    blovetu
    例:@media (max-width: 600px) {}你可以设置一下,最小宽度和最大宽度
?
这是一首

TA贡献55条经验 获得超6个赞

推荐rem去定义大小

查看完整回答
反对 回复 2016-08-05
  • 2 回答
  • 0 关注
  • 3136 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信