css中网页缩放属性zoomtransform中的scale
程序员文章站
2024-01-19 12:45:16
...
如果项目的版心是1300px的话,如果小屏观看的话会有横向的滚动条,这个时候再去改项目的样式的话就比较的麻烦了,可以使用zoom来缩放页面
zoom支持的类型有:
类型 | 说明 |
---|---|
百分比zoom:50%; | 表示缩小到原来的一半 |
数值zoom:0.5; | 表示缩小到原来的一半 |
mormal关键字zoom:normal; | 等同于zoom:1; |
虽然谷歌等浏览器支持了zoom但是zoom并不是标准的属性
css3中transform的scale
transform中的scale是明确的写到规范里面的,从ie9到其他的浏览器都支持
scale有专门的x,y方向的控制
和zoom不同的是scale不支持百分比和normal,只能是数值和负值
差异
- zoom的缩放是基于左上角的,而scale默认是居中缩放的
- zoom的缩放改变了元素占据空间的大小,scale缩放占据的原始尺寸不变,页面的布局不会发生变化
- 两者对元素渲染的计算方法不一样
- 对文字的缩放规则不一样,zoom缩放受限制于最小12px字体的大小,而scale是纯粹的对图形进行了比例来控制
- 渲染性能的差异
- 由于zoom的缩放会改变元素的真实空间的大小,会影响到其他的元素,在文档流中zoom加在任意一个元素身上都会导致页面的重新渲染,而scale加在任意一个元素身上只会在当前的元素上重绘,使用scale的元素尺寸是不变的,但是zoom会改变其原来的尺寸
使用的代码如下:
@media screen and (max-width: 1300px){
body{
zoom:0.9;
}
}
@media screen and (max-width:1200px){
body{
zoom: 0.85;
}
}
@media screen and (max-width: 1100px){
body{
zoom:0.75;
}
}
@media screen and (max-width: 1000px){
body{
zoom:0.7;
}
}
上一篇: Eager Execution
下一篇: 算法学习(五)---队列
推荐阅读
-
css中网页缩放属性zoomtransform中的scale
-
CSS中可以和不可以继承的属性实例讲解
-
CSS3中的background-size(对响应性图片等比例缩放)_html/css_WEB-ITnose
-
Css中的 pixelHeight属性_html/css_WEB-ITnose
-
如何搞定网页中那些烦人的图标_html/css_WEB-ITnose
-
如何搞定网页中那些烦人的图标_html/css_WEB-ITnose
-
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
-
学习淘宝网页中的代码_html/css_WEB-ITnose
-
如何设置网页中的一段文字,使它的宽度是页面宽度的62%且能自动换行?_html/css_WEB-ITnose
-
CSS3中的background-size(对响应性图片等比例缩放)_html/css_WEB-ITnose