Author：Mr.柳上原
- 付出不亞于任何的努力
- 愿我們所有的努力，都不會被生活辜負
- 不忘初心，方得始終
html+css布局
前端學習的基礎
html+css畢業已經有兩個星期
現在原生js班學習也有一個多星期了
這是不包含需要用到js的最后一節學習筆記
感慨頗多
筆到紙上卻一個字也寫不出來
希望自己在js的學習上也能做到不忘初心
付出不亞于任何人的努力
天生我才必有用，千金散盡還復來
我會發上來我做的京東商城的html+css靜態代碼
算是對html+css學習的一個肯定和總結吧
因為并沒有想要去刻意的做成教程或類似的東西
初衷僅僅是想等以后回過頭來
看看自己曾經為之努力過的事情
所以這些筆記都是根據老師的講解
自己的使用習慣編寫的
如果有同樣在學習前端的路上努力的同窗有什么疑問
我會不吝賜教，共同進步
然后
下次會把js學習筆記一步步發布上來
<!DOCTYPE html> <!-- 文檔類型：標準html文檔 -->
<html lang='en'> <!-- html根標簽 翻譯文字：英文 -->
<head> <!-- 網頁頭部 -->
<meta charset='UTF-8'/> <!-- 網頁字符編碼 -->
<meta name='Keywords' content='關鍵詞1,關鍵詞2'/>
<meta name='Description' content='網站說明'/>
<meta 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>
