文件名称:移动端适配+响应式开发参考代码
文件大小:9KB
文件格式:ZIP
更新时间:2021-07-16 07:58:32
rem+viewport 移动端适配 响应式开发
设计稿的宽度:designWidth 允许自适应的最大宽度(超过这个值屏幕元素不在自适应增大):maxWidth 页面顶部加上:<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" > 这段js的传入两个参数:一个为设计稿实际宽度,一个为显示的最大宽度(允许的屏幕最大宽度,用来限制屏幕过大之后元素还会自适应增大的) 例如设计稿为750,最大宽度为600,则为(750,600),屏幕大于600之后就不会自适应变大了,也相当于在用@media属性时min-width只设置到了600,没有后面的屏幕尺寸,就不会再变化了 公式:1rem = 浏览器屏幕宽(width) * 100 / 设计稿宽(designWidth) (750,750)含义1rem = clientWidth * 100 / 750 (750,2160)含义1rem = clientWidth * 100 / 750 clientWidth是动态获取的 后
【文件预览】:
移动端适配,响应式开阿发
----flexible.js(3KB)
----flexible.min.js(952B)
----base.html(2KB)
----LICENSE(11KB)
----base.css(2KB)
----README.md(553B)