html5移动端自适应布局的实现


Posted in HTML / CSS onApril 15, 2020

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

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

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,在不同屏幕大小的手机上展示的大小效果是不一样的,和手机屏幕的大小比例自适应

<script>
   (function(doc, win) {
    var docEl = doc.documentElement, //根元素html
     //判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。
     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
     recalc = function() {
      var clientWidth = docEl.clientWidth;
      if(!clientWidth) return;
      //把document的fontSize大小设置成跟窗口成一定比例的大小,从而实现响应式效果。
      if(clientWidth >= 640) {
       clientWidth = 640;
      }
      docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
      console.log(clientWidth);
      console.log(docEl.style.fontSize);
     };
     recalc();
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false); //addEventListener事件方法接受三个参数:第一个是事件名称比如点击事件onclick,第二个是要执行的函数,第三个是布尔值
    doc.addEventListener('DOMContentLoaded', recalc, false) //绑定浏览器缩放与加载时间
   })(document, window);
  </script>
<div id="div2" class="text" style="border: 0.04rem solid #ccc;
            height: 14rem;font-size: 0.5rem;">

到此这篇关于html5移动端自适应布局的实现的文章就介绍到这了,更多相关html5移动端自适应 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 #HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 #HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 #HTML / CSS
canvas 基础之图像处理的使用
Apr 10 #HTML / CSS
用canvas显示验证码的实现
Apr 10 #HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 #HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 #HTML / CSS
You might like
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
轮播图组件js代码
2016/08/08 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python反射用法实例简析
2017/12/22 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
政府会议通知范文
2015/04/15 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
Python find()、rfind()方法及作用
2022/12/24 Python