html（12）

最新推荐文章于 2024-09-23 15:22:36 发布

Ywasl

最新推荐文章于 2024-09-23 15:22:36 发布

阅读量113

点赞数

分类专栏：入门笔记文章标签： html

本文链接：https://blog.csdn.net/Ywasl/article/details/119276481

版权

入门笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了响应式设计的概念，讲解了移动端实现响应式的两种方法：百分比和rem配合js，以及如何利用pxtorem插件进行单位转换。同时，详细阐述了使用vw和vh单位、transform属性实现元素的各种变形效果，包括位移、旋转、放缩、倾斜等。此外，还提及了多列布局的相关属性，如column-width、count、gap和rule，为构建灵活的前端布局提供指导。

摘要由CSDN通过智能技术生成

响应式

概念：任何尺寸的屏幕都会有一个适当的效果

移动端实现的响应式

1.用百分比
2.用rem配合js实现
	rem：居于html字体大小
	*rem=量取的宽度*100/750
实现步骤：
	1.引入js文件
	<script src='js文件的路径'></script>
	2.js文件里面的两个数字改成设计稿的高度
	3.实现的时候，计算成对应的rem值即可
利用插件完成ps转rem：搜索px，安装pxtorem
文件-首选项-设置-搜索 pxtorem，将默认字体大小改为100px
选中要换单位的代码Alt+z 一键转换

使用vw和vh

任意屏幕宽=100vw
*vw=量取的宽度*100/设计图的宽度

变形、位移、旋转、放缩、斜切

语法：
	transform：变形的方式
1.位移（让元素移动位置）
	translate(x,y)
	translatex(*px)
	translatey(*px)
	translatez(*px)
	translate3d(x,y,z)
2.旋转
	transform:rotate(*deg):平面旋转
	rotatx(*deg)
	rotaty(*deg)
	rotatz(*deg)
	rotat3d(x,y,z)
3.放缩
	transform:scale(x,y) [x对应宽度变化的倍数]
	scalex()			[y对应高度变化的倍数]
	scaley()
	scalez()
	scale3d(x,y,z)
4.倾斜
	skew（）
5.其他属性
	1.改变元素变形的几点
		transform-origin：xyz；
	2.景深【元素距离眼睛的距离】
		perspective：0px；
	3.转换成3d空间
		transform-style：perserve-3d
多列布局
	column-width 列宽
		   count 列数
		   gap 列于列之间的间隔
		   rule 列边框
	column-rule：1px solid red；列边框