一样是写在style当中，和CSS一样
@media screen and (min-width : 像素)若视窗宽度小於 X像素画面则会变为
{
画面则会变为怎样的排版就写在这里
}
所以当叶面的像素小於768px，就会改变，程序码就会长
@media screen and (min-width : 768px)若视窗宽度小於768px
{
画面则会变为怎样的排版就写在这里
}
那我们继续下去
首先以上面的768px来看，要先了解到我们会有 大於768px(电脑) 和 小於768px(手机) 两种都需要设定
假设今天要设定 class名为abc的 排版，我要让他今天
使用电脑时呈现display:block;
使用手机时呈现display:flex;，要怎麽写呢??
使用 @media 前的CSS
.abc{
display:block;
}
使用 @media 後的CSS
.abc{
display:flex;
}
@media screen and (min-width : 768px)若视窗宽度小於768px
{
.abc{
display:block;
}
}
有发现哪里不一样吗??没错，在原本一开始的CSS从block变成flex了!!而在 @media 里面的却变为block。
在使用 @media 时，原先写好的CSS是在使用手机时所呈现的，所以依照题目要求在手机要呈现flex
而在 @media 里面所写的才是使用电脑时所呈现出来的，所以依照题目要求在电脑要呈现block
那当然除了排版之外，背景颜色、字体大小等等也都可以做设定，大家可以玩玩看，
那我也附上简单的程序码，让大家可以直接复制贴上直接改起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 100%;
max-width: 1200px;
margin: auto;
justify-content: center;
}
h2{
font-size: 40px;
text-align: center;
margin: 10px;
}
.item{
background-color: #acc;
margin: 5px;
padding: 3px;
position: relative;
}
.item img{
width: 100%;
vertical-align: middle;
}
.text{
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
font-size: 40px;
color: aqua;
background-color: rgba(0,0,0,.5);
position: absolute;
text-align: center;
flex-direction: column;
justify-content: center;
transition: all .5s 0s ease;
opacity: 0;
}
.item:hover .text{
opacity: 1;
}
@media screen and (min-width:600px) {
.wrap{
display: flex; /*重点在这*/
}
}
</style>
</head>
<body>
<h2>@media运用part2</h2>
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/400/400?random2">
<div class="text">
<h2>请点我</h2>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/400/400?random3">
<div class="text">
<h2>请点我</h2>
</div>
</div>
</div>
</body>
</html>
RWD是必备技能ㄚㄚㄚ!! 那我们铁人赛Day17见罗!!
感谢大家花宝贵的时间阅读这系列的文章，由於篇幅有限，其实还有很多主题无法尽录，不过希望阅读过後，大...
嗨各位~ 今天要来分享一下关於上次提到 Javascript 没有类别可以实体化只有物件， 那他到...
共同点： 原本的 this 是指向全域物件 window ，使用 bind、call、apply ...
BMI计算器 今天来个简单的综合应用，将前面所介绍的东西放在一起，结合设计出一个BMI计算器。这次介...
猴子接香蕉 教学原文参考：猴子接香蕉 这篇文章会介绍如何使用「创建角色」、「角色是否碰到其他角色」、...