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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
HTML中的表单元素介绍
Feb 28 HTML / CSS
CSS list-style-type属性使用方法
May 21 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python中的Descriptor描述符学习教程
2016/06/02 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
30年同学聚会感言
2014/01/30 职场文书
捐助倡议书范文
2014/04/15 职场文书
超市开店计划书
2014/04/26 职场文书
中国梦读书活动总结
2014/07/10 职场文书
股份合作协议书
2014/09/10 职场文书
自我查摆剖析材料
2014/10/11 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
如何书写授权委托书?
2019/06/25 职场文书