移动端开发的简单适配方案
来源:互联网 发布:c语言神奇海螺 编辑:程序博客网 时间:2024/05/24 04:54
现在是移动端的天下啊,但是在做移动端开发的时候会遇到很多坑,适配是必须要做的,这里总结一下自己平时写移动端页面的两种简单处理办法,希望能够帮到大家:
第一种:利用js来计算不同设备中的文字大小
var deviceWidth = document.documentElement.clientWidth;if(deviceWidth > 640) deviceWidth = 640;document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
以上代码中如果设计稿是750的记得把6.4改成7.5
第二种及时利用媒体查询来设置
html { font-size: 100px; background-color: #f9f9f9;}@media screen and (min-width: 320px) { html { font-size: 50px; }}@media screen and (min-width: 360px) { html { font-size: 56.25px; }}@media screen and (min-width: 375px) { html { font-size: 58.59375px; }}@media screen and (min-width: 400px) { html { font-size: 62.5px; }}@media screen and (min-width: 414px) { html { font-size: 64.6875px; }}@media screen and (min-width: 440px) { html { font-size: 68.75px; }}@media screen and (min-width: 480px) { html { font-size: 75px; }}@media screen and (min-width: 520px) { html { font-size: 81.25px; }}@media screen and (min-width: 560px) { html { font-size: 87.5px; }}@media screen and (min-width: 600px) { html { font-size: 93.75px; }}@media screen and (min-width: 640px) { html { font-size: 100px; }}@media screen and (min-width: 680px) { html { font-size: 106.25px; }}@media screen and (min-width: 720px) { html { font-size: 112.5px; }}@media screen and (min-width: 760px) { html { font-size: 118.75px; }}@media screen and (min-width: 800px) { html { font-size: 125px; }}@media screen and (min-width: 960px) { html { font-size: 150px; }}
其实这两种办法只是简单的处理,如果要更好的处理,大家可以参考各大网站的方式,如:淘宝,网易等。
这是文字的适配,在正常些样式的时候设计稿的真是尺寸一半即为我们需要用到的尺寸。
这只是说了文字的适配,移动端的适配要想做到更好,最为重要的就是图片的适配,这里就不多说,大家有兴趣可以自行google。
阅读全文
0 0
- 移动端开发的简单适配方案
- 移动端H5开发的屏幕适配方案
- 移动端适配方案
- 移动端适配方案
- 移动端适配方案
- 移动端适配方案
- 移动端适配方案
- 移动端适配方案
- 移动端适配方案
- 推荐一个移动端的适配方案
- 移动端适配方案的优缺点比较
- 移动端适配方案(上)
- 移动端适配方案(下)
- 移动端适配方案(上)
- 移动端适配方案(下)
- 移动端前端适配方案对比
- 移动端适配方案总结
- 移动端页面适配方案
- 傅里叶-梅林变换实现图像配准
- map和set
- JAVA Swing日期选择控件datepicker的使用
- Springboot MyBatis多数据源切换
- python strip()函数 介绍
- 移动端开发的简单适配方案
- jilu
- 汇编语言: 以下面形式定义一个长整数,其所占用字节数由 N 得到,试编写一个程序,实现对 N 字节的 NUM 的值求补,并把求补后的值仍保存在 NUM 中。
- JBPM(一)---JBPM简介及其开发环境搭建
- Strings of Power
- Android的surfaceView讲解
- 转:typedef函数指针的用法(C++)
- 一个机器学习博士生的忠告
- 关于LDA的一些思考