html做分页的网站,装修设计师培训班,百度爱采购优化,wordpress注册弹窗代码基本实现核心思想
基本原则上是#xff0c;布局更多地使用flex#xff0c;然后尺寸使用rem#xff0c;vw#xff0c;vh为单位如果是根据不同的屏幕需要有不同的布局了#xff0c;一般通过检测屏幕尺寸换不同的站点或者媒体查询使用css
rem
以html字体太小为1rem的大小布局更多地使用flex然后尺寸使用remvwvh为单位如果是根据不同的屏幕需要有不同的布局了一般通过检测屏幕尺寸换不同的站点或者媒体查询使用css
rem
以html字体太小为1rem的大小html为16px1rem则16px。rem之所以能自适应就是根据屏幕大小去用is重新设置html的字体大小。算法为html字体大小(is获取到的当前设备宽度/设计图宽度)*设计图宽度下1rem大小对应的自动转化库-postcss-pxtoremjs计算
script
let widthMath.min(document.body.clientwidth,750); //获取屏幕宽度大于750为750let fontsize(width/750)*100 //计算html字体大小 1rem 100pxdocument.documentElement.style.fontsizefontsizepx //赋值字体大小
/script 安装postcss-pxtoremjs计算自动化转换 使用px即可 在vite/vue.config.js中配置 vw vh
1vw1%视口宽度1vh1%视口高度假设屏幕宽高为750*1200 那么 1vw就是7.5px 1vh就是12使用ww做单位无需做计算因为vw会自动根据屏幕宽度变化vh一般用来做全屏设计对应的自动转化库-postcss-px-to-viewport 安装-postcss-px-to-viewport计算自动化转换 使用px即可 在vite/vue.config.js中配置 百分比
百分比是相对于父元素的百分比所以一般除非是最外层的容器否则不具备响应式调整的功能。
方案对比
