H5学习笔记14 常见单位 响应式布局 rem+vw推导过程 定位移动端布局 flexible.js 布局 跑马灯 网格布局 反转背面不可见 视角 双飞翼布局
响应式布局靠的是媒体查询
1 <style>
2 *{
3 margin:0;
4 padding:0;
5 }
6 div{
7 width: 100%;
8 height: 200px;
9 }
10 /* 媒体查询关键字 @media */
11 /* a>1200 */
12 @media screen and (min-width:1200px){
13 div{
14 background: red;
15 }
16 }
17
18 /* 700<a<1200 */
19 @media screen and (min-width:700px) and (max-width:1200px){
20 div{
21 background: yellow;
22 }
23 }
24
25 /* a<700 */
26 @media screen and (max-width:700px){
27 div{
28 background: cyan;
29 }
30 }
31 </style>
32 </head>
33 <body>
34 <div>我的颜色变变变</div>
35 </body>
常见单位
<!-- 常见单位
1、px 是一个固定值 不可以跟随设变大小的变化而变化 不建议使用在移动端
2、pt 9pt==12px 同上
3、em 默认情况下 1em==16px
em和父元素的font-size有关 如果父元素font-size:40px; 则1em==40px
多用于首行缩进 不建议使用在移动端
4、rem 默认情况下 1rem==16px
rem的大小与根节点html的font-size相关
如果html{font-size:100px;} 则1rem==100px; 一般用于移动端rem+vw布局
5、vw 他是设备宽度百分之一的大小 是一个单位 可以修饰宽度 高度 文字大小 间距等
他是可以根据设备的大小变化而变化的 用于移动端
6、vh 他是设备高度的百分之一大小 是一个单位 可以修饰宽度 高度 文字大小 间距等、
7、vmin 他是设备宽高中 较小的一方的百分之一大小 是一个单位 可以修饰宽度 高度 文字大小 间距等、
比如说 w1000 h400 此时 1vmin=4px
如果说 w600 h1000 此时 1vmin=6px
8、vmax 他是设备宽高中 较大的一方的百分之一大小 是一个单位 可以修饰宽度 高度 文字大小 间距等、
比如说 w1000 h400 此时 1vmax=10px
如果说 w600 h1000 此时 1vmax=10px
-->
<!--
当前设备宽度1080px 高度720px
此时 1vw=10.8px
1vh= 7.2px -->
rem+vw推导过程
<style>
*{
margin:0;
padding:0;
}
header{
设计图是二倍图 量出的大小要除以2
h88 写的时候就是 h44
我们页面中 px这个单位是不能用的 为什么 因为他是一个固定值 不会跟随页面大小的变化而变化
所以 我们使用rem+vw布局
这个时候 我们知道 1rem默认是16px 他的大小根据html{font-size:}变化而变化
如果我现在想把44px转换为rem 44px/16 有点难 我不能一下子算出来
那如果1rem是1px呢 那么44px 就是44rem 是不是很好算
但是 这个数有点大 也不是不可以 你可以这样子规定
现在 我想规定 1rem==100px 这样子 44px----0.44rem 这是我规定的
因为 rem大小和html文字大小相关 所以这个时候 我需要做一件事情 在页面中声明
html{font-size:100px}
此时 1rem==100px 但是还有一个问题 刚说过移动端不建议使用px这个单位 到头来 这不还是用了px吗
我们需要将px换成可以根据设备而等比例缩放的单位 是什么呢？ vw
已知当前的设计图是640px 所以我们当前是以320px的设备为标准
那这个时候 100vw = 320px (设备宽度是320px 1vw是设备宽度百分之一)
所以 1vw = 3.2px
我们之前规定了 html{font-size:100px}
100px = ？vw
100px=31.25vw
所以此时 html{font-size:31.25vw} 此时1rem==100px
所以 640的设计图 你测量大小后 除以2(dpr) 得到的值 再除以100 就变成了对应的rem
比如 测量高度88px 88/2/100=0.44rem
现在 已知设计图为750px 我如果希望1rem==100px 求html{font-size:26.67vw}
}
</style>
</head>
<body>
<header></header>
</body>
定位移动端布局
1 <!-- 一整屏页面 头尾固定 -->
2 <style>
3 *{
4 margin:0;
5 padding:0;
6 }
7 /* 假设是640的设计图 我希望1rem = 100px */
8 html{
9 font-size: 31.25vw;
10 }
11 html,body{
12 height: 100%;
13 }
14 body{
15 /* 重置文字大小 */
16 font-size: 0.12rem;
17 }
18 header{
19 height: 0.5rem;
20 background: rgba(22, 77, 211, .3);
21 /* 定位 一定记得设置宽度 */
22 position: sticky;
23 left:0;
24 top:0;
25 width: 100%;
26 }
27 main{
28 /* 高度百分百 */
29 height: 100%;
30 background: red;
31 padding-bottom: 0.6rem;
32 }
33
34
35 </style>
36 </head>
37 <body>
38 <header>头部</header>
39 <main>
40
41 开头内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域
42
43 </main>
44 <footer>哈哈哈</footer>
45 </body>
flexible.js 布局
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title>flexible.js布局</title>
7 <link rel="stylesheet" href="../../day5-1/iconfont/iconfont.css">
8 <style>
9 *{
10 margin:0;
11 padding:0;
12 }
13 /* 一整屏页面 */
14 html,body{
15 height: 100%;
16 }
17 body{
18 display: flex;
19 flex-direction: column;
20 font-size: 0.3rem;
21 }
22 header{
23 height: 0.88rem;
24 display: flex;
25 line-height: 0.88rem;
26 /* 两端环绕对齐 */
27 justify-content: space-around;
28 color:#595959;
29 }
30 header section:nth-of-type(1){
31 color:#ff554b;
32 font-size: 0.36rem;
33 }
34 .icon-chazhao{
35 font-size: 0.3rem;
36 }
37 main{
38 flex:1;
39 /* 高度占据剩余空间 */
40 background: #f5f4f9;
41 overflow: auto;
42 }
43 figure{
44 margin-bottom: 0.21rem;
45 background: #fff;
46 }
47 figure>img{
48 width: 100%;
49 height: 4.22rem;
50 /* 解决图片3px问题 */
51 display: block;
52 border:0;
53 }
54 figcaption{
55 height: 0.96rem;
56 line-height: 0.96rem;
57 border-bottom: 0.01rem solid #e8e8e8;
58 /* 设置弹性盒 */
59 display: flex;
60 justify-content: space-between;
61 padding:0 0.3rem;
62 }
63 figcaption img{
64 vertical-align: middle;
65 }
66 figcaption span{
67 font-size: 0.24rem;
68 color:#9c9c9c;
69 margin-left: 0.12rem;
70 margin-right: 0.33rem;
71 }
72 .left span{
73 color:#282828;
74 font-size: 0.26rem;
75 }
76 footer{
77 background: #f5f5f5;
78 height: 0.88rem;
79 /* 设置弹性盒 */
80 display: flex;
81 justify-content: space-around;
82 /* 让项目垂直居中 */
83 align-items: center;
84 }
85 footer a{
86 text-align: center;
87 text-decoration: none;
88 font-size: 0.2rem;
89 color:#505050;
90 }
91 footer .iconfont{
92 font-size: 0.4rem;
93 display: block;
94 }
95 footer a:nth-of-type(2){
96 color:#f55b5b;
97 }
98 </style>
99 </head>
100 <body>
101 <header>
102 <section>推荐</section>
103 <section>逗比剧</section>
104 <section>社会</section>
105 <section>呆萌</section>
106 <section>娱乐</section>
107 <i class="iconfont icon-chazhao"></i>
108 </header>
109 <main>
110 <figure>
111 <img src="../images/视频_02.jpg" alt="">
112 <figcaption>
113 <div class="left">
114 <img src="../images/视频_05.jpg" alt="">
115 <span>科技微讯</span>
116 </div>
117 <div class="right">
118 <span>382万次播放</span>
119 <img src="../images/视频_08.jpg" alt="">
120 <span>4227</span>
121 <img src="../images/视频_11.jpg" alt="">
122 </div>
123 </figcaption>
124 </figure>
125
126 <figure>
127 <img src="../images/视频_02.jpg" alt="">
128 <figcaption>
129 <div class="left">
130 <img src="../images/视频_05.jpg" alt="">
131 <span>科技微讯</span>
132 </div>
133 <div class="right">
134 <span>382万次播放</span>
135 <img src="../images/视频_08.jpg" alt="">
136 <span>4227</span>
137 <img src="../images/视频_11.jpg" alt="">
138 </div>
139 </figcaption>
140 </figure>
141
142 <figure>
143 <img src="../images/视频_02.jpg" alt="">
144 <figcaption>
145 <div class="left">
146 <img src="../images/视频_05.jpg" alt="">
147 <span>科技微讯</span>
148 </div>
149 <div class="right">
150 <span>382万次播放</span>
151 <img src="../images/视频_08.jpg" alt="">
152 <span>4227</span>
153 <img src="../images/视频_11.jpg" alt="">
154 </div>
155 </figcaption>
156 </figure>
157
158 </main>
159 <footer>
160 <a href="javascript:;">
161 <i class="iconfont icon-shouye2"></i>
162 首页
163 </a>
164 <a href="javascript:;">
165 <i class="iconfont icon-play-fill"></i>
166 视频
167 </a>
168 <a href="javascript:;">
169 <i class="iconfont icon-xihuan"></i>
170 关注
171 </a>
172 <a href="javascript:;">
173 <i class="iconfont icon-wode1"></i>
174 未登录
175 </a>
176 </footer>
177 </body>
178 <!-- 引入js -->
179 <script src="../js/flexible.js"></script>
180 </html>
181 <!-- rem+vw布局 -->
182 <!-- 1、要写很完全的meta name="viewport"
183 2、640的设计图 要规定html{font-size:31.25vw}
184 750的设计图 要规定html{font-size:26.67vw}
185 3、测量的大小 要除以2 再转换为rem -->
186
187
188
189 <!-- flexible.js 布局 建议应用于750的设计图
190 引入js文件即可
191 1、不要写meta 删掉！！！
192 2、不需要给html设置font-size
193 3、测量的大小不需要除以2 直接除以100变为rem -->
跑马灯
1 <style>
2 *{
3 margin:0;
4 padding:0;
5 }
6 marquee{
7 background: #0f0;
8 width: 500px;
9 height: 200px;
10 }
11 </style>
12 </head>
13 <body>
14 <!-- direction方向 属性值有left right up down -->
15
16 <!-- behavior 运动行为 有来回 alternate -->
17 <!-- scrollamount速度 值越大 越快 -->
18 <marquee behavior="" direction="up" scrollamount="100">
19 象鼻山位于桂林市象山区桃花江与漓江汇流处，海拔220米，相对高度55米，因酷似一头舒卷长鼻、畅饮清流的大象而得名。象鼻山与漓江交相辉映，是桂林山水融合的典范之一
20 </marquee>
21 </body>
网格布局 容器属性(给父元素加)
1 <style>
2 main{
3 width: 80%;
4 height: 800px;
5 background: pink;
6 /* 设置网格布局 */
7 display: grid;
8 /* 你要分成几行几列呢 */
9 /* 分成三列 分别为100px 400px 300px */
10 /* grid-template-columns:100px 400px 300px ; */
11 /* 分成几行 分成4行 分别为200px 200px 200px 200px */
12 /* grid-template-rows: 200px 200px 200px 200px; */
13
14
15
16 /* 还可以将行列的宽度大小设置成百分比 */
17 /* grid-template-columns: 25% 25% 25% 25%;
18 grid-template-rows: 33.33% 33.33% 33.33%; */
19
20
21 /*还可以将行列的宽度大小设置 repeat(参数1，参数2)
22 参数1 ： 重复的次数
23 参数2 ： 重复的数值或者重复的模式 */
24 /* grid-template-columns:repeat(4,25%);
25 grid-template-rows:repeat(2,30%); */
26
27
28 /* 还可以设置自动填充 auto-fill关键字( 自动填充 )
29 当项目宽高固定，容器不固定的情况下，自动填充网格列数 */
30 /* grid-template-columns:repeat(auto-fill,300px); */
31
32
33 /* fr关键字(列宽片段) 等分 */
34 /* grid-template-columns: 1fr 2fr 3fr; */
35
36
37
38 /* minmax() 功能函数
39 minmax(100px, 1fr)表示列宽不小于100px，不大于1fr */
40 /* grid-template-columns: 2fr minmax(400px,2fr) 1fr; */
41
42
43 /* auto 关键字 自动填充 */
44 /* grid-template-columns: 100px 200px auto; */
45
46
47 /* 列间距 */
48 /* grid-column-gap: 20px; */
49
50 /* 行间距 */
51 /* grid-row-gap: 30px; */
52
53
54 grid-template-columns: 100px 100px 100px;
55 grid-template-rows: 100px 100px 100px;
56 /* grid-template-areas: 'h b c'
57 'd e f'
58 'g a i'; */
59
60
61 /* 规划子元素放置的顺序（默认为先排行后排列） */
62 /* grid-auto-flow: column; */
63
64
65 /* 设置单元格内容在单元格内 水平 | 垂直 的对齐方式 */
66 /* 水平 */
67 /* justify-items: start;靠左 */
68 /* justify-items: center; 每一个单元格中间 */
69 /* justify-items: end;靠右 */
70 /* justify-items: stretch; 当项目没有设置大小 则宽度和列宽一样 */
71 /* 垂直 */
72 /* align-items: stretch;当项目没有设置大小 则高度和列高一样 */
73 /* align-items: center; 居中 */
74 /* align-items: start;靠上 */
75 /* align-items: end; */
76 /* place-items: <justify-items> <align-items> 复合式写法*/
77
78
79
80 /* 设置整个内容区域在容器里面的水平 | 垂直 对齐方式 */
81 /* 可以理解为项目们整体在 父元素区域的排列 */
82 /* justify-content: start;整体靠左 */
83 /* justify-content: center;整体居中 */
84 /* justify-content: end;整体靠右 */
85 /* justify-content: space-around;两端环绕对齐 */
86 /* justify-content: space-between; 两端顶格对齐 */
87 /* justify-content: space-evenly;等距对齐 */
88 /* 垂直 */
89 /* align-content: start;整体靠左 */
90 /* align-content: center;整体居中 */
91 /* align-content: end;整体靠右 */
92 /* align-content: space-around;两端环绕对齐 */
93 /* align-content: space-between;两端顶格对齐 */
94 /* align-content: space-evenly;等距对齐 */
95 /* place-content: <justify-content> <align-content> 复合式写法 */
96
97 }
98 section{
99 background: #0f0;
100 border:1px solid #000;
101 }
102 section:nth-of-type(3){
103 /* grid-column-start属性：左边框所在的垂直网格线
104 grid-column-end属性：右边框所在的垂直网格线
105 grid-row-start属性：上边框所在的水平网格线
106 grid-row-end属性：下边框所在的水平网格线 */
107
108 grid-column-start: 1;
109 grid-column-end: 4;
110 grid-row-start: 1;
111 grid-row-end: 3;
112
113 /* grid-column属性是grid-column-start和grid-column-end的合并简写形式
114 grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
115 注意 / 前后空格隔开 */
116 }
117 </style>
118 </head>
119 <body>
120 <main>
121 <section>1</section>
122 <section>2</section>
123 <section>3</section>
124 <section>4</section>
125 <section>5</section>
126 <section>6</section>
127 <section>7</section>
128 <section>8</section>
129 <section>9</section>
130 </main>
131 </body>
反转背面不可见
1 <style>
2 h1{
3 width: 300px;
4 height: 300px;
5 background: pink;
6 transition: 1s;
7 /* 背面不可见 也就是说 翻转180deg 啥也看不见 */
8 backface-visibility: hidden;
9 }
10 h1:hover{
11 transform: rotateY(180deg);
12 }
13 </style>
14 </head>
15 <body>
16 <h1>好好学习</h1>
17 </body>
视角
1 <style>
2 html,body{
3 height: 100%;
4 }
5 body{
6 /* 视角 3D里面使用的 */
7 perspective: 1200px;
8 }
9 /* 视角 是说 你看元素的远近
10 横看成岭侧成峰，远近高低各不同
11 不识庐山真面目，只缘身在此山中 */
12
13 @keyframes xz {
14 0%{ transform: rotateX(10deg) rotateY(10deg);}
15 100%{ transform: rotateX(10deg) rotateY(1000deg);}
16 }
17 /* 统一图片大小 */
18 img{
19 width: 200px;
20 height: 300px;
21 /* 设置定位 先让图片们都在一个位置 */
22 position: absolute;
23 left:0;
24 top:0;
25 }
26 /* 设置包裹图片的父元素大小和一张图片一样 */
27 div{
28 width: 200px;
29 height: 300px;
30 background: cyan;
31 /* 希望他垂直水平居中浏览器 */
32 position: absolute;
33 left:0;
34 top:0;
35 right:0;
36 bottom:0;
37 margin:auto;
38 animation: xz 30s linear infinite;
39 /* 如果 需要3d界面的样式 一定要给3d元素的 父元素设置3d空间属性 */
40 transform-style: preserve-3d; /* 默认值flat 平面 */
41 }
42 img:nth-of-type(1){
43 transform: rotateY(30deg) translateZ(400px);
44 }
45 img:nth-of-type(2){
46 transform: rotateY(60deg) translateZ(400px);
47 }
48 img:nth-of-type(3){
49 transform: rotateY(90deg) translateZ(400px);
50 }
51 img:nth-of-type(4){
52 transform: rotateY(120deg) translateZ(400px);
53 }
54 img:nth-of-type(5){
55 transform: rotateY(150deg) translateZ(400px);
56 }
57 img:nth-of-type(6){
58 transform: rotateY(180deg) translateZ(400px);
59 }
60 img:nth-of-type(7){
61 transform: rotateY(210deg) translateZ(400px);
62 }
63 img:nth-of-type(8){
64 transform: rotateY(240deg) translateZ(400px);
65 }
66 img:nth-of-type(9){
67 transform: rotateY(270deg) translateZ(400px);
68 }
69 img:nth-of-type(10){
70 transform: rotateY(300deg) translateZ(400px);
71 }
72 img:nth-of-type(11){
73 transform: rotateY(330deg) translateZ(400px);
74 }
75 img:nth-of-type(12){
76 transform: rotateY(360deg) translateZ(400px);
77 }
78 </style>
79 </head>
80 <body>
81 <div>
82 <img src="images/1.jpeg" alt="">
83 <img src="images/1.jpg" alt="">
84 <img src="images/2.jpg" alt="">
85 <img src="images/3.jpg" alt="">
86 <img src="images/4.jpg" alt="">
87 <img src="images/6.jpg" alt="">
88 <img src="images/7.jpg" alt="">
89 <img src="images/5.jpg" alt="">
90 <img src="images/8.jpg" alt="">
91 <img src="images/9.jpg" alt="">
92 <img src="images/10.jpg" alt="">
93 <img src="images/11.jpg" alt="">
94 </div>
95 </body>
双飞翼布局
<style>
*{
margin:0;
padding:0;
}
.left{
width: 200px;
height: 500px;
background: yellow;
float: left;
}
.right{
width: 300px;
height: 600px;
background: red;
float: right;
}
.center{
/* 注意！！1中间部分不要设置宽度 */
height: 900px;
background: cyan;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 注意！！！中间区域 一定要写在结构最后 左右部分先写出来 -->
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
浙公网安备 33010602011771号