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 相关文章推荐
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP 引用文件技巧
2010/03/02 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
浅析Python的命名空间与作用域
2020/11/25 Python
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
售后主管岗位职责
2013/12/08 职场文书
思想汇报格式
2014/01/05 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
新文化运动的基本口号
2014/06/21 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
工作作风建设心得体会
2014/10/22 职场文书
长城英文导游词
2015/01/30 职场文书
政工师工作总结2015
2015/05/26 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js