移动端的适配

1.js适配

屏幕尺寸适配

window.onload =function () {

/*720代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是

  为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/

  getRem(750, 100);

};

window.onresize =function () {

getRem(750, 100);

};

function getRem(pwidth, prem) {

var html =document.getElementsByTagName("html")[0];

  var oWidth =

document.body.clientWidth ||document.documentElement.clientWidth;

  html.style.fontSize = (oWidth / pwidth) * prem +"px";

}



2.css适配

@media (min-width: 320px) {

html{

font-size:42.67px;

}

}

@media (min-width: 360px) {

html{

font-size: 48px;

}

}

@media (min-width: 375px) {

html{

font-size: 50px;

}

}

@media (min-width: 414px) {

html{

font-size: 55.2px;

}

}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、使用真实手机测试未发布网页的方法 方法① 在虚拟机中搭建xampp,将文件通过FTP传到虚拟机,在一个局域网中...
    fastwe阅读 4,088评论 0 0
  • 写在前面 本文参考了大量关于移动端适配的资料 侵删 谢谢 基础介绍 在说明移动端的适配之前我们需要理解一个重要的东...
    熊蛋子17阅读 4,183评论 1 3
  • 一、是什么 可以这样理解,同一套代码在不同分辨率的手机上跑时,页面元素间的间距,留白,以及图片大小会随着变化,在比...
    Viaphlyn阅读 4,155评论 1 1
  • (function() { vardoc=document; vardocEle=doc.documentElem...
    美滋滋213阅读 1,769评论 0 0
  • 【百日生涯营DAY24】 任务来啦 请准备好接收来自百日营的能量传递吧 投资日:投资自己的核心是把自己的资源、资产...
    小眼睛喵阅读 1,009评论 0 0

友情链接更多精彩内容