html网页在不同尺寸屏幕大小,移动端h5页面不同尺寸屏幕适配方法

移动互联网时代，多端适配对于前端工作者来说带来了很多麻烦，有麻烦相应的就有解决方案，面对适配方法有很多，百分比布局。弹性布局，，还有rem布局今天主要针对rem布局讲解一下；

本方法是阿里手淘的页面方法，详细讲解就不多赘述，，下面附上链接自行查看http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html，，

本文主要讲使用方法 flexible

第一种方法是将文件下载到你的项目中，然后通过相对路径添加:

或者直接加载阿里CDN的文件：

flexible实际上就是能过JS来动态改写meta标签控制font-size的值

然后页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果。

页面里面所有涉及到px的地方都可以改成rem， 1rem=75px 按照这个公式换算皆可以，至于为什么这么计算请参考上面链接

对于字体font-size 建议不适用rem 可以媒体查询自己手动改写字体大小

第二种方法

< script > (function(doc, win) {

var docEl = doc.documentElement;

resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize';

recalc = function() {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

} (document, window)); < /script>

通过js直接控制也行

第三种方法

设置 html{ font-size: calc(100vw/7.5); } 然后全局px替换为rem就可以

以上就是大概的解决方案，如果某位有更好的方法欢迎评论，互相交流，，，

本文也是通过自身项目学习及网上资料搜索汇集，如果雷同请不要奇怪，知识重在分享

html网页在不同尺寸屏幕大小,移动端h5页面不同尺寸屏幕适配方法相关推荐

移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...
移动端h5页面不同尺寸屏幕适配方法
移动互联网时代,多端适配对于前端工作者来说带来了很多麻烦,有麻烦相应的就有解决方案,面对适配方法有很多,百分比布局.弹性布局,,还有rem布局今天主要针对rem布局讲解一下: 本方法是阿里手淘的页面 ...
移动端h5页面不同尺寸屏幕适配兼容方法
最近刚开始做移动端页面,遇到了不少bug,说一下解决移动端不同屏幕页面的适应问题. 1. viewport属性及html页面结构 <meta name="viewport" ...
移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
安卓运行时监听配置更改：sim卡、本地语言、键盘显示或隐藏、字体大小、UI模式、屏幕方向、屏幕布局（另一个屏幕）、可用屏幕大小（横纵向）、无屏幕大小（外接屏幕）。
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解安卓运行时可以监听的配置更改:sim卡.本地语言.键盘显示或隐藏.字体大小.UI模式.屏幕方向.屏幕布局(另一个屏幕).可用屏幕大小(横纵向).无屏幕 ...
移动端h5页面的设计稿尺寸
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
Vue自定义指令—— 完美解决H5页面不同尺寸屏幕的适配问题
H5适配一直是一个头疼的问题,基于vue框架针对H5在不同分辨率的手机做出来一套适配方案,具体如下: 设计图按iPhone6/7/8 去掉底部返回条的尺寸设计的: width:750px , hei ...
java软件屏幕大小转换,android 用java写一个自动适配各种屏幕大小的工具
android 用java写一个自动适配各种屏幕大小的工具,假设我当前机器屏幕宽高为1920*1116,我页面某个组件的宽度为100px,那么在1280*800的机器上,按道理将应该是100/1920 ...
android 背景图片自适应屏幕大小,android 设置桌面背景图片适应屏幕大小
今天做demo,设置桌面每天自动更新背景,但是桌面的背景都是被系统裁剪过的图片,上网百度了一下,有个过时的方法,改进后果然有用了! Bitmap bmp=BitmapFactory.decodeRes ...

html网页在不同尺寸屏幕大小,移动端h5页面不同尺寸屏幕适配方法

html网页在不同尺寸屏幕大小,移动端h5页面不同尺寸屏幕适配方法相关推荐

最新文章

热门文章