实现手机端自适应布局的几种方法
来源:互联网 发布:武汉百纳信息知乎 编辑:程序博客网 时间:2024/05/26 20:21
1.固定宽度
头部设置
<meta name="viewport" id="viewport" content="width=640,user-scalable=0, target-densitydpi=320">
,意思为根据设计稿的大小(640px),以320(iphone5)为基准进行缩放,此方法简单粗暴高效,在后面的css样式中只需要根据设计稿的实际大小,根据px来写即可,可完美自适应大小不同的屏幕。
这种方法目前见到的缺点有:
- 缩放会导致有些页面元素会糊的情况。
- 如果此页面有可能嵌套在别的系统或者页面中,如果上层页面
width=device-width
就会整个错乱。 - 在微信中如果需要识别二维码,会识别不出来。
- (欢迎补充)
2,使用rem适配
rem是根据根元素(html)font-size的大小计算出来的
例如设置html{font-size: 10px }
那么1rem=10px;
设置html{font-size: 20px }
那么1rem=20px;
这样我们只需要改变根元素html的font-size大小缩放页面。
改变根元素font-size大小的方法。
1. 媒体查询
一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备,然后去针对那些设备去做media query设置也可以实现适配。
如下所示
html{ font-size:12px;}@media only screen and (min-width: 371px){ html {font-size: 14px !important;} } @media only screen and (min-width: 401px){ html {font-size: 15px !important;} } @media only screen and (min-width: 428px){ html {font-size: 16px !important;} } @media only screen and (min-width: 481px){ html {font-size: 16px !important;} } @media only screen and (min-width: 569px){ html {font-size: 17px !important;} }
如果设计稿宽度为640,那么对应的是html{font-size:12px;}
那么设计稿的大小/2/12为你需要的rem的大小。
例如:设计稿btn的宽度为48px,高度为24px,字体大小为24,那么在代码中对应为 .btn{
width: 2rem;
height: 1rem;
font-size: 1rem
}
2.使用js控制根元素font-size大小
<script> (function (win,doc){ if (!win.addEventListener) return; var html=document.documentElement; function setFont() { var cliWidth=html.clientWidth; html.style.fontSize=100*(cliWidth/750)+'px'; } win.addEventListener('resize',setFont,false); setFont(); })(window,document); </script>
媒体查询可以实现固定几个屏幕大小的适配,而js可以实现所有的适配。
如引用上面的代码,设计稿大小为750,如果为640 将html.style.fontSize=100*(cliWidth/750)+'px';
中750改为640
在这里1rem=50px;
例如在宽度为750的设计稿中btn的宽度为100px,高度为50px,字体大小为30px那么对应的css为
.btn{
width: 1rem;
height: 0.5rem;
font-size: 0.3rem
}
此处以375屏幕(iphone6)为基准,设计稿为实际尺寸的2倍,所以设计稿大小/2/50为你所需要的rem大小。
注:chrome默认最小限制字体为12px。
第一次写博客,如有错误,请指出并多多包涵。
- 实现手机端自适应布局的几种方法
- 阿里前端笔试题看 CSS布局与定位---实现2列自适应布局的几种方法
- 左边固定,右边自适应及左边自适应,右边固定布局的几种方法
- 左边固定,右边自适应及左边自适应,右边固定布局的几种方法
- 左边固定,右边自适应及左边自适应,右边固定布局的几种方法
- 左边固定,右边自适应及左边自适应,右边固定布局的几种方法
- 左边固定,右边自适应及左边自适应,右边固定布局的几种方法
- 自适应手机端rem布局
- 手机端自适应布局demo
- 关于css布局中左侧固定右侧自适应的几种方法
- 双栏布局的几种方法:左边固定,右边自适应
- 多种方法实现自适应布局
- 实现两列等宽布局的几种方法
- 布局中实现三角形的几种方法
- 几种左边固定右边自适应的左右布局方式
- 两种方式实现父布局中两列布局的自适应
- 实现网页布局的自适应
- css实现左边定宽右边自适应的两列布局5种方法
- openresty使用gzip压缩解压
- android-native反调试
- 忘记了oracle数据库用户的密码,怎么办?
- 直方图
- 【2017-11+10】 JS中正则表达式详解
- 实现手机端自适应布局的几种方法
- 主存储器组织
- Linux下c语言多线程编程
- 分布式进程BaseManager(multiprocessing.managers)
- nodeJs快速拼接sql,获取用于事务控制的sql_params对象
- 关于iOS 9.2.1 从App Store下载出现不规则崩溃的问题
- 怎么解决java.lang.NoClassDefFoundError错误
- Graph Practise
- linux mysql 数据库操作