博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
App响应式布局
阅读量:4661 次
发布时间:2019-06-09

本文共 685 字,大约阅读时间需要 2 分钟。

1、手机的响应式布局,所有的单位用rem来表示。

  如:设计稿的宽度是750,则html标签的font-size=屏幕宽度/7.5。那么在网页中的尺寸 = 设计高上实际的尺寸/100.

把下面的代码作为一个单独的resize.js文件,手机的页面引用这个文件。

$("html").css({"font-size":$(window).width()/7.5});$(window).resize(function(){    $("html").css({"font-size":$(window).width()/7.5});});

 

2、移动端单位rem作为单位,一定要注意,换算后字体的px单位一定不能小于12px。不然的话,rem值非常小,字体还是会有12px的。当屏幕比较小,没什么影响,屏幕一大起来,字体就会变得很小,于其他的元素不统一了。

3、rem单位和em结合起来使用会更好。有字体的标签里高度、行高使用em的有点非常明显。比如 : input标签,里面给文字设置大小,如果文字的高度比input高,溢出来的就会被切掉,字体只有一半。用em做单位就不会出现这种问题。基本上表单、表格、button的高度都用em做单位比较好。

4、标签的高度和文字的高度有比较明显倍数关系,使用em作为单位,页面的自适应会非常好。

5、手机端适配,开发的时候需要测试 机型(谷歌浏览器中的模拟手机)

  a、iPhone6

  b、iPhone5 

  c、Nexus5 

 

转载于:https://www.cnblogs.com/wfblog/p/8992529.html

你可能感兴趣的文章
深入响应式原理
查看>>
使用wget下载网页API的常用命令
查看>>
JQuery 判断指定ID是否存在
查看>>
python入门
查看>>
checkbox与文字对齐
查看>>
高精度模板
查看>>
iOS - OC/Swift:验证手机号/固话用正则表达式
查看>>
HTML accessKey约定俗成的标准
查看>>
Spring框架系列(六)--事务Transaction
查看>>
冯.诺依曼体系结构
查看>>
poj2492 A Bug's Life(带权并查集)
查看>>
ABAP区别CLEAR、REFRESH、FREE
查看>>
JavaScript中Web应用程序事件处理
查看>>
禅定记录 5
查看>>
restrictkeyword
查看>>
Etcd学习(一)安装和.NETclient測试
查看>>
js-xlsx操作excel表格
查看>>
HBase学习
查看>>
硬盘及其分区(0819整理)
查看>>
Font in Google Adsense
查看>>