H5页面移动端背景图以及文字适配方法

H5页面适配的方法

背景的适配
给页面设置背景图，因为适配不同的设备（设备屏幕分辨率不同），所以再给背景图宽高的时候不能全部给100%
背景图（ui设计图）的比例是固定的，这里举例750px*1468px,如果给背景图设置为

background-size: 100% 100%;

那么背景图就会完全填充到整个屏幕，当屏幕的比例不同于你设计图的比例的时候，你的背景图就会有拉伸现象（背景变形）
为了让背景不变形有两种方法
固定宽填充整个屏幕，让高自适应

background-size: 100% auto;

固定高填充整个屏幕，让宽自适应

background-size: auto 100%;

这两种方法可以保证图片是不变形的，但是根据屏幕的比例不同，背景图会有不同程度的裁切或者背景不能完全覆盖整个屏幕的现象，所以一般会采用固定宽，让高自适应的方法（背景上下的内容一般会比较少，裁切的情况不至于裁到背景的主要内容）

同样的，背景图里切出来的独立的元素用一样的方法操作，固定宽或者固定高，记得和背景图保持一致

当你要固定一个独立元素到背景图的特定位置的时候

.featherLeftTop {width: 11.47%;//height: 9.75%;position: relative;//top:55px;//top: calc(55 * 100vw / 750 );top:calc(200 * 100vw / 750);left: 13.33%;animation: fly1 3s infinite linear;

这里用到calc属性根据你图片的裁切情况，移动某个独立元素的位置，比如下图，不论图片怎么裁切，我就要固定到这个位置，仅仅用top: px 或者
top:% 无法实现，所以用到calc属性
这里100vw是你屏幕的宽度，750是设计图的宽度 100vw / 750就是你设计图随屏幕缩放的比例了，200是你在屏幕宽度750下，调整元素到合适位置的距离，这个距离* 缩放比例就可以将元素死死的固定在你想要的位置了，当然这是背景图位置为

     background-position: top;background-size:100% auto;

的情况，也可以设置为bottom 需要另外的计算公式，千万不要设置为center
计算起来跟麻烦很麻烦

再来看下字体的适配
我这次用到的是媒体查询配合rem使用即

@media screen and (min-width:300px){html{font-size: 12.24px;}
}

rem是相对于根元素的字体大小的单位，也就是我设置根元素大小为12px,那么当我在页面中使用1rem，就相当于12px 2rem = 24px，所以当你给不同的屏幕设置不同的根元素大小的时候，你的字体也就会相应的变化了

@media screen and (min-width:300px){html{font-size: 12.24px;}
}@media screen and (min-width:330px){html{font-size: 13.47px;}
}
@media screen and (min-width:360px){html{font-size: 14.7px;}
}
@media screen and (min-width:390px){html{font-size: 16px;}
}
@media screen and (min-width:420px){html{font-size: 17.14px;}
}
@media screen and (min-width:450px){html{font-size: 18.36px;}
}
@media screen and (min-width:480px){html{font-size: 19.6px;}
}
@media screen and (min-width:510px){html{font-size: 20.8px;}
}
@media screen and (min-width:540px){html{font-size: 22px;}
}
@media screen and (min-width:570px){html{font-size: 23.26px;}
}
@media screen and (min-width:600px){html{font-size: 24.5px;}
}
@media screen and (min-width:630px){html{font-size: 25.7px;}
}
@media screen and (min-width:660px){html{font-size: 26.9px;}
}
@media screen and (min-width:690px){html{font-size: 28.16px;}
}
@media screen and (min-width:720px) {html {font-size: 29.38px;}
}
@media screen and (min-width:750px){html{font-size: 30.56px;}
}

上面的是我在这个项目中设置的档位，这个档位要根据你们设计图设计的来设置，设计图设置750px，整行可以放下24个字
那么设置根元素为750 / 24 = 31.25 px，写页面直接给字体设置1rem就可以了这是满足屏幕是750px的情况，剩下的你想设置的档位依次类推就好了
最低我设置了屏幕尺寸为300px，一共16个档位，最后一档300 / 24 = 12.5px
中间的用计算器自己算吧，这样设置好后，字体就可以根据你的屏幕尺寸变换大小了

大概的关于适配的就这样了，我还做给一个简单的h5，里面适配字体我直接根据100vw / 每行占据的字体个数好像也可以用在上面就是100vw / 24 = 4.16vw

note:calc属性是带单位计算的，你计算完后的单位需要是px,否则会不生效。

H5页面移动端背景图以及文字适配方法相关推荐

移动端背景图软键盘的兼容
本文主要介绍移动端背景图软键盘的界面兼容行问题解决. 1.问题描述,当前端小工程师写背景图的情况下,经常会遇到在谷歌浏览器的调试模式下一切都很ok,结果在真机测试却样式堪忧.比如,背景图被软键盘撑开, ...
Thinkphp5 生成二维码并与背景图、文字组合生成分享海报
自己做个记录,省的以后要去做过的项目里扒 1.下载安装包,地址: 链接:https://pan.baidu.com/s/1EBbgJYHXJp-4YQA7zDT5gw 提取码:qboc 2.下载完放到 ...
css背景图替代文字 - 如何让css无法加载时页面功能依然不受影响
方法一:利用text-indent将文字移出盒子,然后让换行文字不换行,这样,当css无法加载时,虽然背景图无法显示,但是文字也不会被移出盒子,这样文字显示在用户的视野里了代码: <!DOCT ...
h5页面移动端的社会化分享_Adobe年尾续运H5页面
好看的H5层出不穷小编的压力越来越大头发变得越来越稀少但这都不是重点重点是我们应该怎么学会操作和应用呢 1. H5页面是什么首先,H5这个词,来自"HTML5",且是国 ...
附带有背景图、文字的二维码
前端生成附带有背景图.可添加文字的二维码下载 npm install jr-qrcod --save 引入 const qrcode = require('jr-qrcode'); 使用 <i ...
QT绘图常用功能 Trick: QT带背景图和文字的QPushButton制作
文章目录绘图 QPixmap类:绘图 QPixmap::scaled(): 根据给定的尺寸来放大缩小QPixmap QPixmap为QLabel设置背景图片 QLineEdit的样式只能通过QPal ...
高德地图自定义背景图+自定义文字，marker自定义
mounted() {this.addMarker()}, //实例化marker addMarker() {let me = this;var position = new AMap.LngLat( ...
H5页面调起关注微信公众号的方法
在H5页面里面,可以内置按键或链接,用户点击后触发关注公众号,操作步骤如下: 1.登录目标公众号的后台,登录地址:https://mp.weixin.qq.com: 2.进入首页后,在页面上右键-选择 ...
有哪些免费扫图识别文字的方法？方法要选对
在数字时代,我们经常需要将纸质文档转换成电子格式.而扫描纸质文档是最常见的转换方式之一.然而,这种方式有一个明显的缺点:扫描后的文档仍然是图片格式,无法直接进行编辑和复制.这时候,扫图识别文字就成为 ...

H5页面移动端背景图以及文字适配方法

H5页面移动端背景图以及文字适配方法相关推荐

最新文章

热门文章