场景：为了适应不同尺寸的屏幕
自适应布局我知道的两种方法
1 .使用媒体查询，制定了以下几种自适应方式。 例如，最初显示屏幕宽度在320px-360px之间的原因是html字体大小适合13.65px
@ mediaonlyscreenand (max-width :360 px ) and(min-width3360320px ) )。
html{
字体大小：13.65 px；
}
}
@ mediaonlyscreenand (max-width :375 px ) and(min-width3360360px ) ) ) ) ) ) ) ) )。
html{
字体大小：23.4375 px；
}
}
@ mediaonlyscreenand (max-width :390 px ) and(min-width3360375px ) ) ) ) ) ) ) ) )。
html{
字体大小：23.4375 px；
}
}
@ mediaonlyscreenand (max-width :414 px ) and(min-width:390px ) ) ) ) ) ) ) ) ) )。
html{
字体大小：17.64 px；
}
}
@ mediaonlyscreenand (max-width :640 px ) and(min-width3360414px ) ) ) ) ) ) ) ) ) )。
html{
字体大小：17.664 px；
}
}
@ mediascreenand (最小宽度：640 px )。
html{
字体大小：27.31 px；
}
}
2 .响应式获取画面宽度，计算出一定比率的大小。 如果使用rem而不是px，类似于font-size:1rem，则显示的大小效果因屏幕大小而异，可以适应手机屏幕大小的比例
(功能(doc，win ) {
var docEl=doc.documentElement，//根元素html
判断//窗口中是否有名为orientationchange的方法，如果有，则赋值给变量，如果没有，则返回resize方法。
resize evt=' orientation change ' in window？ '定向变更' : ' resize '，
recalc=function
var clientwidth=docel.clientwidth；
if (！ 客户端窗口(返回；
通过将文档的fontSize大小调整为与窗口成比例的大小，实现响应效果。
if(clientwidth=640 ) {
客户端width=640；
}
docel.style.fontsize=20 * (clientwidth/320 ) ' px '；
console.log (客户端窗口；
console.log (docel.style.fontsize；
(；
recalc (；
if (！ doc.addevent监听器(return；
win.addeventlistener(resizeevt，recalc，false )； //addEventListener事件方法接受三个参数。 第一个是事件名称(如单击事件onclick )，第二个是要执行的函数，第三个是布尔值
doc.addevent listener (domcontentloaded )、recalc、false ) /绑定浏览器的缩放和加载时间
() )文档，窗口；
到目前为止，我已经介绍了这篇关于实现html5移动端自适应布局的文章。 有关更多相关的html5移动端自适应内容，请搜索脚本房屋中的以前文章或继续查看以下相关文章： 今后，我想多支持脚本房屋。