PC端網(wǎng)頁和移動端網(wǎng)頁的有什么不同？
PC屏幕大献烦，網(wǎng)頁固定版心
手機(jī)屏幕小滓窍， 網(wǎng)頁寬度多數(shù)為100%
如何在電腦里面邊寫代碼邊調(diào)試移動端網(wǎng)頁效果？
谷歌模擬器
<style>
body {
height: 3000px;
}
/* 浮動盒子區(qū)域 */
.float {
border: 10px solid tomato;
}
.float div {
width: 200px;
height: 200px;
background-color: #0a0;
border: 10px solid #ff0;
font-size: 60px;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 200px;
}
/* 彈性盒子區(qū)域 */
.flex {
border: 10px solid pink;
justify-content: space-between;
}
.flex div {
/* 盒子 */
width: 200px;
height: 200px;
background-color: #0a0;
border: 10px solid #6cf;
/* 文字 */
font-size: 60px;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 200px;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/*
添加彈性布局 ：display：flex
彈性容器：display：flex
默認(rèn)寬度和父元素一樣巩那，默認(rèn)的高度由內(nèi)容撐開吏夯。
12345這些小盒子叫彈性盒子
/
display: flex;
width: 1000px;
height: 600px;
background: orange;
}
.box div {
/ 彈性盒子：彈性容器的最近一級子元素（親兒子子元素） /
/ 1.默認(rèn)的寬度由內(nèi)容所撐開，默認(rèn)的高度為父元素的高度
（側(cè)軸（垂直）方向默認(rèn)是拉伸） /
/ 2.彈性盒子沒有塊級即横，行內(nèi)噪生，行內(nèi)塊元素之分，統(tǒng)統(tǒng)稱為彈性盒子
（可以直接設(shè)置寬高东囚，并且一行設(shè)置多個） /
/ 默認(rèn)不換行：寧愿犧牲自己的寬度跺嗽，都不會自動換行 */
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
a {
width: 100px;
height: 100px;
background-color: purple;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* 添加彈性布局 df */
/* 改變主軸對齊方式 */
/* flex-start 默認(rèn)值：從父元素的左邊開始顯示
justify-content: flex-start;*/
/* flex-end ：讓彈性盒子整體，顯示在彈性容器的右邊
justify-content: flex-end;*/
/* center 讓彈性盒子整體页藻，顯示在彈性容器的中間
justify-content: center;*/
/* space-around 讓空白空間環(huán)繞在彈性盒子的兩側(cè)桨嫁，
第一個和最后一個盒子離彈性容器的距離為彈性盒子與彈性盒子之間的1/2
justify-content: space-around;*/
/* space-between 讓空白空間分布在彈性盒子與彈性盒子之間
---第一個和最后一個彈性盒子離彈性容器的距離為0
justify-content: space-between;
/* space-evenly 彈性盒子離彈性容器之間的距離
與彈性盒子與彈性盒子之間的距離相等
justify-content: space-evenly;*/
/* justify-content: center; */
justify-content: space-between;
display: flex;
width: 1000px;
height: 600px;
background: orange;
}
.box div {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* 添加彈性布局 /
display: flex;
/ 默認(rèn)值flex-start從起點(diǎn)開始排列 /
/ align-items：flex-start */
/* flex-end 從終點(diǎn)排列 */
/* align-items：flex-end */
/* 垂直居中 */
align-items: center;
/* 默認(rèn)值 stretch 垂直拉伸：沿著側(cè)軸（垂直）方向拉伸彈
性盒子的高度直到父元素一樣高 */
/* align-items：stretch */
width: 1000px;
height: 600px;
background: orange;
}
.box div {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
.box .te {
/* align-self的屬性值和ai是一樣的，控制某個彈性盒子的側(cè)軸方向排列 */
align-self: flex-start;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 1000px;
height: 600px;
background: orange;
}
.box div {
/* flex: 1; */
width: 200px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
.box .san {
flex: 2;
}
.box .li {
flex: 1;
}
.box .zh {
flex: 3;
}
/* 伸縮比：flex給彈性盒子添加：*/
/* 1.所有的盒子都添加flex：均分彈性容器的寬度*/
/* 2.其他的盒子寬度固定份帐，只有一個盒子設(shè)置了flex為1 */
/* <!-- 需求李狗蛋吃一份璃吧，張三吃兩份，張翠花吃三份 --> */
/*
總結(jié)：
彈性容器設(shè)置的屬性：df废境，jc畜挨，ai
彈性盒子設(shè)置的屬性：align-self，flex
*/
</style>
<style>
.box {
display: flex;
/* 水平居中 主軸居中 */
justify-content: center;
/* 垂直居中：側(cè)軸居中 */
align-items: center;
/* 能不能用定位噩凹？可以用巴元！ */
/* position: relative; */
/* 浮動不會配合df一起使用！ */
width: 400px;
height: 400px;
background: #6cf;
}
.son {
/* position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% -50%); */
width: 120px;
height: 120px;
background-color: #0a0;
}
</style>
