发表于： 2019-12-15 21:51:04
3 996
修真院的第一天，用到了不少知识。觉得这种任务模式挺好的，解决了我这种爱看文章不爱打的习惯。
文章除了最基本的html和css布局外，还涉及到了响应式，我是用flex布局加js监听屏幕尺寸变动做的。
CSS部分
html{
/* 根字体设定为100px */
font-size: 100px;
}
.box{
/* 长宽为3.75rem,也就是375px；手机标准屏幕宽 */
width: 3.75rem;
height: 3.75rem;
background: #666;
/* 使用flex布局 */
display: flex;
/* 两个项目之间留有缝隙 */
justify-content:space-between;
/* 项目若无长度，填满副轴 */
align-content: stretch;
}
.box>div{
/* 使用flex布局 */
display: flex;
/* 改轴 */
flex-direction: column;
/* 两个项目之间留有缝隙 */
justify-content:space-between;
}
li{
width: 1rem;
height:1rem;
background: red;
}
JS部分
<script>
// 加载时调用一次函数
setNowFontSize();
// 声明函数
function setNowFontSize() {
// 默认屏幕宽度
var StandardWidth = 375;
//默认字体大小
var StandardFontSize = 100;
// 屏幕实时宽度
var nowWidth = document.documentElement.offsetWidth;
// 当前屏幕 / 标准屏幕 == 当前根元素字体 / 标准根元素字体
// 750 / 375 == x / 100
// 750 / 375 * 100 == x
// 当前字体 = 当前屏幕 / 标准屏幕 * 标准屏幕根元素大小
var nowFontSize = nowWidth / StandardWidth * StandardFontSize;
console.log(nowWidth);
console.log(nowFontSize);
document.documentElement.style.fontSize = nowFontSize + 'px';
}
// 当屏幕改变时，调用函数
window.addEventListener('resize', setNowFontSize);
</script>
希望明天能完成下一个任务。
返回列表
评论