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>

复制