您好!欢迎来到源码码网

源码码网

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

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

  • 时间:2021-02-02 21:20 编辑:admin 来源:源码码网 阅读:550
  • 扫一扫,手机访问
摘要: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,在不同屏幕大小的手机上展示的大小效果是不一样的,和手机屏幕的大小比例自适应。

image.png

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

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

  • 全部评论(0)
最新发布的资讯信息
【建站技巧|建站常识】网页动画特效插件wow.js常用属性及用法介绍(2022-01-20 14:09)
【建站技巧|建站常识】网站制作Js实现滑动时网站导航栏背景色渐变效果(2022-01-20 13:58)
【行业资讯|】全民达人app系统 全民探店app开发全民探店一键发布视频自带地址poi(2021-12-30 11:01)
【源码教程|开源源码】开源低代码在线设计平台源码在线表单设计(2021-12-11 13:41)
【源码教程|开源源码】开源原生PHP评论系统源码可任意对接至任意网站(2021-12-11 13:16)
【源码教程|开源源码】开源代码朔方会员管理软件 - shuofang-MemberManagement(2021-12-11 13:09)
【源码教程|开源源码】开源书签分享平台网站源码 Hackershare系统(2021-12-11 13:03)
【行业资讯|】社交APP:同城约会/陌生人社交/婚恋交友(2021-12-07 15:02)
【源码教程|开源源码】基于ThinkPHP开发的Im聊天系统online_chat客户端源码(2021-11-26 20:17)
【源码教程|开源源码】ThinkPHP开发在线聊天软件系统源码ttltChat服务端下载(2021-11-26 20:11)
联系我们

QQ:2494243972、1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

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


联系客服
手机版

扫一扫进手机版
返回顶部