苏州建网站公司,做网站免费搭建,电脑版网站建设合同范本,wordpress婚礼主题原理#xff1a; 比如一个375px设计稿 其中一个320px宽度的元素 如何实现自适应布局呢#xff1f;
其实可以这样理解#xff1a; 我们先计算出375屏幕时候320px的大小#xff0c;在屏幕变化时候#xff0c;这些元素都会等比例缩放 比如屏幕从375 变为750px时候#xff0…原理 比如一个375px设计稿 其中一个320px宽度的元素 如何实现自适应布局呢
其实可以这样理解 我们先计算出375屏幕时候320px的大小在屏幕变化时候这些元素都会等比例缩放 比如屏幕从375 变为750px时候320 应该变为640
而有一个单位就可以做到统一缩放可以将320px写为320rem 而html 的font-size可以写为1px 然后根据屏幕变化进行更新html 的font-size 就可以达到缩放了比如750px屏幕下将html 的font-size修改为2px 那么320rem 计算出的值就是640px
而postcss-pxtorem 其实就是利用了这个原理 rootValue:设置为16 意思是 一开始是以html的font-size为16px 进行换算 也就是320px 换算为20rem 32px的元素被换算为2rem 但是仅仅配置这里还是不行的此时不管屏幕多大还是显示的在375px下的样式 所以我们应该监听屏幕变化比如切换到750px屏幕时候根html的font-size应该被设置为32px 那么20rem 对应的值才会被算为640px
import $ from jquery
// 设置 rem 函数
function setRem() {// 1920 默认大小16px; 1920px 120rem ;每个元素px基础上/16// 375 屏幕时候使用16px// 750 屏幕时候使用32pxconst screenWidth 375const scale screenWidth / 16const htmlWidth document.documentElement.clientWidth || document.body.clientWidth// 得到html的Dom元素const htmlDom document.getElementsByTagName(html)[0]// 如果太大了 就当做500 来计算if (parseInt(htmlWidth) 500) {htmlDom.style.fontSize 500 / scale px} else {// 设置根元素字体大小htmlDom.style.fontSize htmlWidth / scale px}
}
// 初始化
$(function () {setRem()
})
// 改变窗口大小时重新设置 rem
window.onresize function () {setRem()
}
