bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
历届学生/罗朝/2019-04-16/README.md Normal file
View File

@@ -0,0 +1 @@
# demo

39
历届学生/罗朝/2019-04-16/flex.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex</title>
<style>
body {
margin: 0;
padding: 0;
}
.main {
display: flex;
justify-content: center;
}
.box {
width: 150px;
height: 150px;
background: red;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>

83
历届学生/罗朝/2019-04-16/rem.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rem</title>
<style>
body {
margin: 0;
}
/* html {
font-size: 20px;
}
@media only screen and (min-width: 400px) {
html {
font-size: 21.33333333px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 22.08px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 25.6px !important;
}
}
@media only screen and (min-width: 320px) {
html {
font-size: 17.1px !important;
}
}
@media only screen and (min-width: 375px) {
html {
font-size: 20px !important;
}
}
@media only screen and (min-width: 768px) {
html {
font-size: 41px !important;
}
} */
.box {
width: 1.87rem;
height: 1.87rem;
float: left;
}
.box_1 {
background: yellow;
}
.box_2 {
background: green;
}
</style>
</head>
<body>
<div class="box_1 box">
</div>
<div class="box_2 box">
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.0-beta3/jquery.js"></script>
<script>
function setFont() {
let window_width = window.innerWidth;
let font_size = parseFloat(window_width / 3.75);
$('html').css('font-size', font_size);
}
$(window).on('resize', function () {
setFont();
});
setFont();
</script>
</body>
</html>

21
历届学生/罗朝/2019-04-16/笔记.txt Normal file
View File

@@ -0,0 +1,21 @@
元素计算后的真实宽高(px) = 你代码中设置的rem * 网站html标签的font-size(浏览器默认16px)
1: 通过 媒体查询 检查 用户手机的宽度，然后动态修改 font-size
2: 通过js来检测，然后动态修改 font-size
flex 弹性盒子有12css属性
1: 有6 用在父容器
flex-direction 设置子元素是水平放置还是垂直放置
justify-content 设置元素在主轴(x)的对齐方式
align-items 设置y轴的对齐方式
flex-wrap 当一行放不下的时候，决定元素如何换行
2: 有6 用在子元素
order 设置子元素的排序，数值越小越靠start位置
flex-grow 设置元素的所占空间比
align-self 设置单个元素进行不同其他元素的布局