如何快速產生RWD自適應網頁

在HTML中加入下面這一行

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

導航欄的三條槓

<div class="nav_r">
<form action="#" method="post">
<i class="iconfont"></i>
<input type="search" value="搜尋">
</form>
<object data="img/menu.svg" type="image/svg+xml"></object>
</div>

修改CSS

//如果視窗小於900px,那麼隱藏左側導航
@media only screen and (max-width: 900px){
main{
aside {
display: none;
}
article{
padding: 36px 40px 0 40px;
max-width: 90%;
}
}
}
//如果視窗小於610px 隱藏菜單導航換成三個槓
@media only screen and (max-width: 610px){
header{
.nav {
.nav_l{
ul{
display: none;
}
}
.nav_r{
form{
display: none;
}
object{
display: block;
cursor: pointer;
margin: 25px 30px 0 0 ;
}
}
}
}
}

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store