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

文章次要介绍了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,在不同屏幕大小的手机上展现的大小成果是不一样的,和手机屏幕的大小比例自适应。

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

至此,这篇对于html5挪动端自适应布局的代码就实现了。
此篇文章转载自GoodMai

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据