html5自适应

html5自适应

参考博客：

https://blog.csdn.net/weixin_41228671/article/details/89089362

https://blog.csdn.net/qq_34020571/article/details/78923089

https://www.cnblogs.com/chenhuichao/p/11763135.html

https://www.php.cn/html5-tutorial-379312.html

一.什么是自适应？

二.与响应式的区别？

三.怎么设计？

计算公式：

参数：设计稿尺寸，元素尺寸，html字体尺寸

 

1.增加meta：

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

也可以通过动态js方式设置meta

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

 

2.使用media query(媒体查询)：下面是个例子，可以变通

@media only screen and (max-width: 360px) and (min-width: 320px) {
                html {
                    font-size: 13.65px;
                }
            }

3.使用rem单位：

width:12.5rem;

4.使用百分比单位：

width:20%;