使用css制作自适应布局的常见注意事项有哪些

发布时间:2022-03-02 14:53:29 作者:小新
来源:亿速云 阅读:157

这篇文章主要介绍使用css制作自适应布局的常见注意事项有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

制作自适应布局最常使用的解决方法就是在页面初始化时,利用js去获取宽高再计算。或者就是box-sizing。但接触clac()以后发现,实现自适应原来可以如此简单。接下来讲解一下calc()的常见问题以及注意事项。

1.什么是calc()?

其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。

2.calc()能做什么?

calc()说白了就是为dom元素提供计算,通过使用百分比、empxrem等长度单位值或像素单位值计算出满足条件的宽高。如此一来,自适应的问题可以丢给浏览器去计算。加上使用box-sizing属性,可以实现完美的布局。

3.calc()的使用方法和规则

calc()括号内使用普通的数学运算表达式,例如:加减乘除四则运算。数值可以使用几乎所有长度单位。但如果没有使用固定布局的元素,因其高度不定,故无法使用百分比进行计算。

4.语法注意事项

在表达式中使用加减运算符,运算符左右两边必须空格,否则会报错。例如:width:calc(50% - 10px)。而乘除运算符可以不需要空格,但为了规范化,建议也跟加减运算符一致,左右添加空格。

5.浏览器的兼容性

市面上90%PC浏览器都支持calc()这个属性。IE9+FF4.0+Chrome19+Safari6+都完美兼容,但是在不同内核的浏览器上,需要在其前面加上各浏览器厂商的识别符。而在移动端则不是很理想,因此推荐用于在pc操作频繁的产品,例如财务系统,erp系统。

以上是“使用css制作自适应布局的常见注意事项有哪些”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. css自适应布局
  2. CSS常见样式有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:css中让粗体文字变细

下一篇:DIV标签使用CSS引入的方法有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》