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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 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的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python微信好友数据分析详解
2018/11/19 Python
解决Python一行输出不显示的问题
2018/12/03 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
电子商务毕业生求职信
2013/11/10 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
2014年维修工作总结
2014/11/22 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
小区环境卫生倡议书
2015/04/29 职场文书