腾讯云·社区
html+css学习笔记019-H5响应式布局0自适应布局
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
html+css布局
前端学习的基础
html+css毕业已经有两个星期
现在原生js班学习也有一个多星期了
这是不包含需要用到js的最后一节学习笔记
感慨颇多
笔到纸上却一个字也写不出来
希望自己在js的学习上也能做到不忘初心
付出不亚于任何人的努力
天生我才必有用，千金散尽还复来
我会发上来我做的京东商城的html+css静态代码
算是对html+css学习的一个肯定和总结吧
因为并没有想要去刻意的做成教程或类似的东西
初衷仅仅是想等以后回过头来
看看自己曾经为之努力过的事情
所以这些笔记都是根据老师的讲解
自己的使用习惯编写的
如果有同样在学习前端的路上努力的同窗有什么疑问
我会不吝赐教，共同进步
然后
下次会把js学习笔记一步步发布上来
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<meat name='viewport' content='width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no'> <!-- 自适应布局 -->
viewport 移动端视口调整
width=device-width 宽度等于设备宽度
height=device-height 高度等于设备高度
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
user-scalable 是否允许缩放
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 自适应兼容方法 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
/* 响应式布局 */
@import url('./css/css.css') screen and (min-width:500px) and (max-width:800px); /* 响应式布局内部样式表引用方式：不推荐 */
.box{
width:200px;
height:200px;
background-color:red;
}
@media screen and (min-width:500px) and (max-width:800px){ /*
media 媒体查询
媒体类型：
all 所有
screen 彩屏设备
print 用于打印机和打印预览
speech 用于屏幕阅读器等发声设备
关键词：
not 不是
and 和（前后必须空格隔开）
only 只有
媒体特性：
width
height
min-width
max-width
orientation:portrait; /* 竖屏：宽度小于高度 */
orientation:landscape; /* 横屏：宽度大于高度 */
*/
.box{
width:300px;
height:300px;
background-color:green;
}
}
/* 自适应布局 */
html{
font-size:100px; /* rem=100px */
}
div{
width:1rem;
height:1rem;
background-color:red;
}
</style>
<link rel='stylesheet' type='text/css' href='./css/css.css' media='screen and (min-width:500px) and (max-width:800px)'/> <!-- 响应式布局外链样式表引入方法 -->
</head>
<body> <!-- 网页主干：可视化区域 -->
<div class='box'> </div> <!-- 块标签-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var html = document.querySelector('html');
changeRem();
//添加resize事件
window.addEventListener('resize',changeRem);
function changeRem() {
//获取设备宽度
var width = html.getBoundingClientRect().width;
//console.log( width );
html.style.fontSize = width/10+ 'px';
}
</script> <!-- 自适应布局js控制代码 -->
</body>
</html>本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句