html5页面布局框架(html5移动端自适应布局的实现)
类别:Web前端 浏览量:1171
时间:2021-10-15 00:17:41 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,在不同屏幕大小的手机上展示的大小效果是不一样的,和手机屏幕的大小比例自适应
<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>
<li id="li2" class="text" style="border: 0.04rem solid #ccc; height: 14rem;font-size: 0.5rem;">
到此这篇关于html5移动端自适应布局的实现的文章就介绍到这了,更多相关html5移动端自适应 内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5的新特性
- html5所有特性(HTML5 FileReader对象的具体使用方法)
- html5自定义结构指令(浅析HTML5 meta viewport参数)
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
- html5新的表单元素新的特性(HTML5表单验证特性知识点小结)
- html5表单元素自带验证功能(纯CSS3实现表单验证效果非常不错)
- html5滑动刷新(HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码)
- html语法规范解释(浅析HTML5 Landmark)
- html5本地存储功能(利用Node实现HTML5离线存储的方法)
- 用于播放视频文件的html5元素(html5自动播放mov格式视频的实例代码)
- html5菜单栏(html5写一个BUI折叠菜单插件的实现方法)
- html5视频播放(使用HTML5加载音频和视频的实现代码)
- html5淘汰的标签(浅谈HTML5新增和废弃的标签)
- html5定位地理位置(html5 制作地图当前定位箭头的方法示例)
- html5 spellcheck属性
- html5可以做语音聊天吗(基于Html5实现的语音搜索功能)
- 《无敌破坏王2》 不聊彩蛋,聊聊我从动画里看到的现实那些事儿(无敌破坏王2不聊彩蛋)
- 《寄生虫》 三观不正 人类悲欢从来不相通,感同身受也并非本能(寄生虫三观不正)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
- 《白狐的人生》热拍 贾征宇偶像包袱难自弃 图(白狐的人生热拍)
- 七夕取消了,牛郎织女没做核酸七夕已经取消(牛郎织女没做核酸七夕已经取消)
- 网友抵制 多地取消 夏日祭 为何惹众怒(网友抵制多地取消)
热门推荐
- 使用docker在linux环境中部署springboot包的教程(使用docker在linux环境中部署springboot包的教程)
- python编写自动发送微信信息(python实现向微信用户发送每日一句 python实现微信聊天机器人)
- margin负值的作用
- centos7 apache配置(CentOSLinux下的apache服务器配置与管理方法分享)
- sql server查询语句语法(详解SQL Server的简单查询语句)
- 别让用户发呆,提升网站用户体验
- 云服务器租用还是托管好(租用云服务器我们需要知道的几点内容)
- dede标签调用方法(DEDE热门tag,DEDE首页digg,DEDE随机热门关键字调用方法)
- python坐标输入(python导入坐标点的具体操作)
- pythonpil安装包(基于Python的PIL库学习详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9