您好!欢迎来到源码码网

源码码网

热门搜索: 淘宝客    点赞系统    虚拟商城源码    小程序源码   

HTML5页面移动端自适应布局的实现示例代码

  • 软件教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2021-02-02 21:20
  • 阅读:726

文章主要介绍了html5移动端自适应布局的实现,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧。

场景:为适应各种大小的屏幕

自适应布局我知道的两种方式

1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px

<style>
   @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;
    }   }
  </style>

2.响应式,获取到屏幕的宽度,计算出一定的比例大小,使用rem代替px,在使用的时候如 font-size:1rem,在不同屏幕大小的手机上展示的大小效果是不一样的,和手机屏幕的大小比例自适应。

image.png

<div id="div2" class="text" style="border: 0.04rem solid #ccc; 
height: 14rem;font-size: 0.5rem;">

至此,这篇关于html5移动端自适应布局的代码就实现了,关注源码码网,更多技术教程。

全部评论(0)
推荐阅读
  • 毕业求职季,藏书馆APP,拥有主宰自己的力量!
  • 毕业求职季,藏书馆APP,拥有主宰自己的力量!
  • 毕业求职季,藏书馆APP,拥有主宰自己的力量!《从0到1学做直播电商》、《从0到1学做短视频营销》、《摄影基础》、《一学就会的会计入门》、《出纳实操从新手到高手》、《财务报表一本通》、《零起点日语入门一看就会》、《英语零起点入门一学就会》、《人力资源新手的128个怎么办》、《HRD:给世界500强做人力资源管理的咨询笔记》、《人力资源管理理论与实务》
  • 行业资讯
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2022-08-03 17:50
  • 阅读:517
  • 域名查询被墙,但是网站却可以正常访问,是什么问题
  • 域名查询被墙,但是网站却可以正常访问,是什么问题
  • 使用第三方seo查询工具​检测域名,提示域名被墙,但是网站确实可以正常打开,也能正常访问,而且域名解析也还真有也只做了www和顶级解析,并且网站也已经备案,网站服务器ip也正常,但是使用工具查询就是显示域名被墙,求指导的大神予以指导,谢谢!
  • 互动社区
  • 来源:源码码网
  • 编辑:热点科技
  • 时间:2022-04-11 09:49
  • 阅读:229
  • 百度站长工具站点logo上传后已审核通过但是搜索不显示
  • 百度站长工具站点logo上传后已审核通过但是搜索不显示
  • 百度站长工具站点logo上传后已审核通过但是搜索不显示,这是为什么?百度站点logo审核权限必须要开通上线百度小程序并且适配H5规则,同时必须最少适配一条才可以有优先获得百度搜索站点logo的展示权限,我们网站已获得logo展示权限,并且上传的logo也已审核通过,现在问题是搜索时不展示,请教各位大神!
  • 互动社区
  • 来源:西安网站建设
  • 编辑:admin
  • 时间:2022-02-22 15:05
  • 阅读:291
  • 盲盒小程序很火,怎么使用盲盒小程序盈利?
  • 盲盒小程序很火,怎么使用盲盒小程序盈利?
  • 盲盒小程序系统,就是说顾客在购买支付前,没法预先知道具体产品款式的商品货物盒子,具有很强的随机性质。只有在顾客购买支付后,打开盒子才会知道自己抽到了什么款式的商品。这种盲盒不确定的刺激会加强重复的反复多次的购买决策,因此最近一段时间以来,盲盒成了让顾客上瘾的现象级事物。就从这个角度来看,这和买六合彩比较相似,都有靠顾客运气的成分。
  • 行业资讯
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-02-21 21:08
  • 阅读:340
联系我们

QQ:2494243972、1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

工作时间:周一至周六 9:00~18:00


联系客服
手机版

扫一扫进手机版
返回顶部