您好!欢迎来到源码码网

源码码网

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

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

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

文章主要介绍了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)
推荐阅读
  • 推荐10个基于Vue3.0开发的全家桶优秀开源项目
  • 推荐10个基于Vue3.0开发的全家桶优秀开源项目
  • 1、PPTistPPTist是一个基于Vue3.x+TypeScript+Pinia+AntDesignVue+Canvas的在线演示文稿(幻灯片)应用,还原了大部分OfficePowerPoint常用功能,实现在线PPT的编辑、演示,支持导出PPT文件。2、vue-next-adminvue-next-admin是一个基于Vue3.x+Typescript+Vite+Elementpl
  • 源码教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-12-05 21:22
  • 阅读:55
  • 开源可商用的数据可视化分析工具DataEase
  • 开源可商用的数据可视化分析工具DataEase
  • DataEase是开源项目,它是数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化。DataEase支持丰富的数据源连接,能够通过拖拉拽方式快速制作图表,并可以方便的与他人分享。
  • 源码教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-12-05 20:56
  • 阅读:172
  • 推荐一个5K Star的企业级开源后台系统源码
  • 推荐一个5K Star的企业级开源后台系统源码
  • 最近在逛网站的时候发现一个不错的开源项目,这个项目目前收获了5KStar,觉得不错,值得拿出来和大家分享下。该项目是由河南·洛阳1024创新实验室团队研发的一套互联网企业级的通用型中后台解决方案!使用最前沿的前后台技术栈SpringBoot和Vue,前后端分离。
  • 源码教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-12-05 20:19
  • 阅读:299
  • 推荐一个4.2k Star 的开源监控系统源码
  • 推荐一个4.2k Star 的开源监控系统源码
  • 如果你是一位前端工程师,那你一定不止一次去解决一些顽固的线上问题,你也曾想方设法复现用户的bug,结果可能都不太理想。怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决。身为一名前端工程师,我每天都要面临很多线上的问题,一时间让我焦头烂额。公司其他的监控系统也有,但是每次解决问题都需要辗转于各种监
  • 源码教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-12-05 20:01
  • 阅读:130
  • 外网如何访问局域网程序:nps内网穿透服务使用介绍
  • 外网如何访问局域网程序:nps内网穿透服务使用介绍
  • 你是不是经常会遇到这么一种需求,需要在外网情况下访问局域网下的程序或者应用?比如,你的电脑上有相当一部分资料,非你本地的用户想访问,怎么办呢?这时候就需要用到内网穿透服务,实现外网用户访问我的内网资源。
  • 建站技巧
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-12-04 17:01
  • 阅读:92
联系我们

QQ:1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

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


联系客服
源码代售 源码咨询 素材咨询 联系客服
029-84538663
手机版

扫一扫进手机版
返回顶部