calc配合rem自适应屏幕宽度

css的calc是计算函数，可以通过搜索引擎学习其他的计算思路。

这是该计算函数兼容性。

这里直接开门见山！！

1920设计稿

html {

font-size: calc(100w / 19.2)

}

在1920设计稿中1rem等于100px，.32rem等于32px

随着屏幕的宽度缩小或放大会变

比如：

div {

width: 1rem;

height: 1rem;

font-size: .32rem;

}

-----------------------------------------

同样750设计稿

html {

font-size: calc(100w / 7.5)

}

在750设计稿中1rem等于100px，.32rem等于32px

随着屏幕的宽度缩小或放大会变

比如：

div {

width: 1rem;

height: 1rem;

font-size: .32rem;

}

1rem等于100px这样容易编写。

这样就用不到js去算屏幕宽度计算后给html设置font-size大小，也用不到postcss了吧？

如有问题欢迎讨论。

---------------------------

发现在safari 游览器中对fontsize设置calc不管用

100/19.2 = 5.2083333vw

100/7.5 = 13.333333vw

于是我直接把得出的数字用vw写死，这样也可以兼容safari游览器了

calc配合rem自适应屏幕宽度相关推荐

自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
如何让网页自适应屏幕宽度
网页自适应屏幕宽度到底是怎么做到的? 1.首先,在网页代码的头部,加入一行viewport元标签: viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width= ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
android webview 自适应屏幕宽度,Android应用开发Android Webview适配屏幕宽度
本文将带你了解Android应用开发Android Webview适配屏幕宽度,希望本文对大家学Android有所帮助. " Android Webview适配屏幕宽度. 网上有很多解决方案 ...
用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画
本人是学生,正在想深入学习html5和css3,所以最近在研究用css3绘制矢量图,于是就用纯css3基于百分比方案绘制了能自适应浏览器宽度而自动变化比例的哆啦a梦动画, 动画的宽高比例为:" ...
android webview 自适应屏幕宽度,Android webview加载html自适应屏幕
最近又写了一篇文章 Android webview加载html代码上下左右有白边问题可以参考一下 webView.getSettings().setJavaScriptEnabled(true) ...
php++背景自适应屏幕宽度,背景图片+自适应屏幕
简单大图,元素空或者一般简单大图可考虑元素,设其宽度100%就可以了. 如果想通过background来设置,需要设置高度,算下长宽比,如果是10:6的话,则可以设置padding-top:60% ...
Css实现自适应屏幕宽度的正方形
思路,正方形,长宽都一样,需要找到一个标准值然后再去设置盒子模型,可以用padding,margin, width/height, 正题开始 1. 使用padding,原因,百分比是基于父元素的宽度, ...
css calc()函数动态根据屏幕宽度计算宽度
今天写移动端H5页面,mui按钮在layer mobile 弹窗 html类型的时候,mui按钮宽度设置为100%的时候,mui按钮宽度会超出屏幕,听同事建议,使用 css calc()函数计算得以解 ...

calc配合rem自适应屏幕宽度

calc配合rem自适应屏幕宽度相关推荐

最新文章

热门文章