谈谈关于scale属性

scale是什么?

根据W3C定义 ,scale主要是进行缩放和转化:

scale能做什么?

1.1px细线

  <div class="wrap">
<div class="UI-scale1"></div>
<div class="UI-scale2"></div>
<div class="UI-scale3"></div>
</div>

CSS代码

.wrap{
position: relative;
}
.UI_scale1{
position: relative;
width: 200px;
height: 50px;
border-bottom:1px solid #000;
}
.UI_scale2{
position:relative;
top: 0px;
left: 0px;
width: 200px;
height: 50px;
border-bottom: 1px solid #000;
}
@media screen and (-webkit-min-device-pixel-ratio:2){
.UI_scale2{
transform: scale(1,0.5);
transform-origin:left center;
}
}

2.页面适配

  function scale(){
var origin_H = 667,
origin_W = 375,
win_H = $(window).height(),
win_W = $(window).width();
var ratio1 = win_H / origin_H ,
ratio2 = win_W / origin_W ;
if(ratio1<ratio2){
$('.page1-wrap').css({
'-webkit-transform':'scale('+ratio1+')'
})
}
else{
$('.page1-wrap').css({
'-webkit-transform':'scale('+ratio2+')'
})
}
}

3.动画(参考animate.css)

@-webkit-keyframes pulse {
0% {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
} 50% {
-webkit-transform: scale3d(1.05,1.05,1.05);
transform: scale3d(1.05,1.05,1.05)
} 100% {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
}

scale的属性会影响那些属性和布局

HTML代码

  <div class="wrap">
<div class="UI-scale1"></div>
<div class="UI-scale2"></div>
<div class="UI-scale3"></div>
</div>

CSS代码

.wrap{
position: relative;
background-color: #ccc;
}
.UI_scale1{
position: relative;
top: 0px;
width: 100px;
height: 50px;
font-size:14px;
line-height: 24px;
margin-left: 50px;
padding: 50px;
border-bottom:1px solid #000;
background-color: red;
}
.UI_scale2{
position: relative;
top: 0px;
width: 100px;
height: 50px;
font-size:14px;
line-height: 24px;
margin-left: 50px;
padding: 50px;
border-bottom:1px solid #000;
transform: scale(0.5);
background: blue;
transform-origin: center center;
}

如图所示可以直接影响到所有带px的属性,但是由于scale属性不会引起重排,会导致父元素的高度和宽度都不会受到影响.

scale和zoom差异

1.zoom引起重排,scale不会引起;缩放的中心点,zoom不能更改,而scale可以更改

2.重排导致的性能

1.scale会只会引起了当前元素

2.zoom会引起重排,所以会影响全部元素

谈谈关于CSS中transform属性之scale的更多相关文章

  1. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  2. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  3. CSS中 Zoom属性

    CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...

  4. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  5. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  6. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  7. CSS3中transform属性的用法

    有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source   print? 01 &l ...

  8. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  9. css中clip-path属性的运用

    今天看到一位同学的需求,要在一个div中加一个小尖尖,对话时发的图片,旁边这个三角是怎么实现与图片的颜色一致,效果如下: 当然,解决这个问题有各种奇淫巧技,现在我们来看一个css属性clip-path ...

随机推荐

  1. 利用POST请求模拟登录豆瓣

    需要用requests库 豆瓣上次更新后,就不能通过直接的requests.post()方式直接传递参数登录了.必须新建session,先GET请求,然后POST才能成功.原因未知 data参数中的四 ...

  2. 关于Web的一些知识,Web怎么构成?

    前端学习:学习地址:黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动,下面这些都是一些学习笔记.临渊羡鱼,不如退而结网!!愿我自己学有所成,也愿每个前端爱好者学有所成 ...

  3. 怎么在linux上安装部署jenkins

    怎么在linux上安装部署jenkins 作为一个非科班出身自学的小白,踩过很多的坑,特此留下记录 以下在虚拟机上示例 系统:linux(centos7) 操作方式:xshell连接终端操作 教程之前 ...

  4. tp5 git 常见命令

    git clone git add . # 跟踪所有改动过的文件 git commit -m "commit message" # 提交所有更新过的文件 git checkout ...

  5. elasticsearch高亮之highlight原理

    一.highlight简介 highlight是提升用户体验的重要手段,搜索引擎通过高亮突出命中关键字等方式,方便用户通过关键字周围的信息快速的确认是否是自己希望的结果: highlight功能通常包 ...

  6. Vue3+ElementPlus的一套开源前台+后台管理模板

    Vue-Element-Faster 基于最新版vue.js 3.x与element-plus2.x实现的一套前台展示系统.后台管理系统模板,自带权限管理模块. API接口基于SpringBoot2. ...

  7. JavaWeb 08_JSP+Dao+Bean+Servlet 实现登录注册(连接数据库,验证码登录,两周内免登陆等功能)

    一.数据库db_01   表usert   字段username,password 二. 目录 三. 配置信息 四. 代码 index.jsp <script type="text/j ...

  8. Arcgis 离线部署api 4.x的两种本地部署方法!

    引言:本文用的是api4.6版本 方法一  拷贝api进去tomcat服务器用绝对地址引用 首先将下载好的api放入Tomcat服务中的Webapp下: 1  可以打开下载好的的 api46/arcg ...

  9. idea在新窗口中打开

    IntelliJ IDEA 2018.1.4 x64版本同时打开多个窗口可以进行如下设置,找到file--Settings...,然后会弹出下面的窗口:然后注意红框里的勾选项,最后确定Apply,OK ...

  10. jQuery--事件绑定|委派|切换

    一.事件的绑定 1.事件的绑定介绍 事件绑定: bind(type,fn) 给当前对象绑定一个事件.例如:A.bind("click",fn);类似A.click(fn) unbi ...