HTML5页面移动端自适应布局的实现示例代码
文章主要介绍了html5移动端自适应布局的实现,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧。
【HTML5页面移动端自适应布局的实现示例代码】场景:为适应各种大小的屏幕
自适应布局我知道的两种方式
1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px
@media only screen and (max-width: 360px) and (min-width: 320px){
html{
font-size:13.65px;
}}
@media only screen and (max-width: 375px) and (min-width: 360px){
html{
font-size:23.4375px;
}}
@media only screen and (max-width: 390px) and (min-width: 375px){
html{
font-size:23.4375px;
}}
@media only screen and (max-width: 414px) and (min-width: 390px){
html{
font-size:17.64px;
}}
@media only screen and (max-width: 640px) and (min-width: 414px){
html{
font-size:17.664px;
}}
@media screen and (min-width: 640px){
html{
font-size:27.31px;
}}
2.响应式,获取到屏幕的宽度,计算出一定的比例大小,使用rem代替px,在使用的时候如 font-size:1rem,在不同屏幕大小的手机上展示的大小效果是不一样的,和手机屏幕的大小比例自适应。
文章图片
至此,这篇关于html5移动端自适应布局的代码就实现了。
此篇文章转载自GoodMai
推荐阅读
- 移动端h5调试方法
- 分享!如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- iOS|iOS runtime应用整理
- 8、Flask构建弹幕微电影网站-搭建后台页面-密码修改、主页控制面板
- python|8. 文件系统——文件的删除、移动、复制过程以及链接文件
- HTML5新增选择器属性方法
- 小程序开发|小程序开发 - 页面传值url类型
- 被催稿了,所以聊聊|被催稿了,所以聊聊 长链接在移动端开发中如何做到和短链接一样高效
- HTML5学习之ul|HTML5学习之ul li列表实战
- html5|各行业工资单出炉 IT类连续多年霸占“榜首”位置