CSS5:移動端頁面(響應式)
如果手機端和PC端頁面差別很大,就不要寫響應式,不要寫@media 就直接將兩個頁面拆開成兩個文件就可以了.關於判斷是手機端你還是PC端,就交給后端來做
只有一些新聞站點和博客站點用響應式,因為布局簡單,響應式足夠
1.媒體查詢 media query
媒體:電腦,紙張,都是媒體
含義:如果媒體滿足0到800 之間,那么會應用這里面的樣式
<style>
@media (max-width: 800px){/*如果媒體滿足0到800 之間,那么會應用這里面的樣式*/
body{
background-color: red;
}
}
</style>注意:
<style>
@media (max-width: 800px){/*如果媒體滿足0-800 之間,那么會應用這里面的樣式*/
body{
background-color: red;
}
}
@media (max-width: 900px){/*如果媒體滿足0-900 之間,那么會應用這里面的樣式*/
body{/*這段媒體查詢比上面優先級高,會將上面的覆蓋,如果低於800了,會變成藍色*/
background-color: blue;
}
}
</style>所以要倒過來寫,先寫大范圍
<style>
@media (max-width: 768px){/*0-768*/
body{
background-color: blue;
}
}
@media (max-width: 425px){/*0-425*/
body{
background-color: red;
}
}
@media (max-width: 375px){/*0-375*/
body{
background-color: orange;
}
}
@media (max-width: 320px){/*0-320*/
body{
background-color: black;
}
}@media (min-width: 769px){/*769~+++*/
/*超過769的*/
body{
background-color: green;
}
}
</style>也可以規定詳細范圍:
1.1引用方法
也可以使用CSS文件的方法引用
https://segmentfault.com/ (這個網站就用了響應式)
還有https://www.smashingmagazine....
能隨着你屏幕寬度動的頁面就是響應式頁面
1.2 要向設計師要網頁設計圖
1.3 隱藏菜單響應式
1.3.1先做手機還是先做PC
Mobile first 先做手機
desktop first 先做PC
推薦Mobile first,因為現在大部分都是手機看網頁
1.3.2CSS優先級問題解決方法
- 用谷歌開發者工具查看CSS優先級,然后調整
- 如果style內嵌在html里,比如jquery的toggle,那么直接使用display: none !important;
1.3.3flex布局的一些用法
header{
display: flex;
/*里面的垂直居中*/
align-items: center;
}
header .mobilMenu {
display: flex;
justify-content: space-around;
/*flex布局display: flex;這個容器使用flex布局
justify-content屬性定義了項目在主軸上的對齊方式。
justify-content: space-around;每個容器里面的項目兩側的間隔相等。*/
background-color: #ccc;
}代碼
預覽
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>響應式頁面</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
ul, ol {
list-style: none;
}
.logo {
width: 60px;
height: 60px;
background: #000;
border-radius: 50%;
}
header {
position: relative;
}
header > button {
position: absolute;
right: 0;
top: 26px;
}
header .mobilMenu {
display: flex;
justify-content: space-around;
/*flex布局display: flex;這個容器使用flex布局
justify-content屬性定義了項目在主軸上的對齊方式。
justify-content: space-around;每個容器里面的項目兩側的間隔相等。*/
background-color: #ccc;
}
header .pcMenu{
display: none;
}
/*接下來做pc端*/
@media (min-width: 451px) {
/*一般都寫 451,手機最大也就450px*/
/*先隱藏手機菜單和按鈕*/
header .mobilMenu{
display: none !important;
/**CSS優先級問題解決方法:
1.直接使用display: none !important;
2.用谷歌開發者工具查看CSS優先級
*/
}
header > button {
display: none;
}
header{
display: flex;
/*里面的垂直居中*/
align-items: center;
}
/*再把pcMenu寫成flex布局*/
header .pcMenu{
display: flex;/*只要改成flex 里面的子項目就變成一行了*/
margin-left: 20px;
background: red;
}
header .pcMenu>li{
margin-left: 20px ;
}
}
</style>
</head>
<body>
<header>
<div class="logo"></div>
<button id="menu">菜單</button>
<ul class="mobilMenu">
<li><a href="#">導航1</a></li>
<li><a href="#">導航2</a></li>
<li><a href="#">導航3</a></li>
<li><a href="#">導航4</a></li>
<li><a href="#">導航5</a></li>
</ul>
<ul class="pcMenu">
<li><a href="#">pc到航1</a></li>
<li><a href="#">導航2</a></li>
<li><a href="#">導航3</a></li>
<li><a href="#">導航4</a></li>
<li><a href="#">導航5</a></li>
</ul>
</header>
</body>
<script>
$('#menu').on('click', function () {
$('.mobilMenu').toggle();//toggle() 方法切換元素的可見狀態。如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。
//缺點:如果使用toggle(),他會把display這個style的屬性內嵌到放在html里.
})
</script>
</html>手機端要加一個meta viewport
歷史原因:最開始手機瀏覽器(蘋果三)會在自己的三四百像素的手機上模擬980像素的顯示效果,然后讓用戶自己去縮放,查看網頁.
那么就告訴瀏覽器不要縮放我的網頁,手機屏幕是多少像素,就顯示多少像素的網頁.使用下面的代碼
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
name="viewport" :視口
content="width=device-width,寬度等於設備寬度,意思就是不要變成980,用設備寬度.
user-scalable=no, 用戶是否可以縮放:不許縮放,因為我在代碼里已經給用戶適配好了
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
初始縮放倍數,最大縮放倍數,最小縮放倍數,都是1.0,即使不能縮放這句話縮寫語法:mate:vp
總結這個meta作用:
- 防止手機頁面模擬 980 像素寬度
- 防止頁面在用戶雙擊的時候放大
- 防止用戶兩指縮放頁面
3.移動端的特點
3.1flex布局是專門給手機定制的
只要學會flex布局,手機端布局基本OK手機端的交互方式不一樣
3.2手機端的交互方式不一樣
- 沒有 hover
- 有 touch 事件
如何監聽滑動事件?記錄兩次滑動時候的坐標,相減,就可以了.
有封裝的庫,例如jquery swipe, vue里的插件 - 沒有 resize
手機端的寬度永遠跟設備寬度一樣 - 沒有滾動條
滾動條會隱藏,會變成一個指示器,跟PC端不一樣 - 沒有ie,意思就是什么CSS屬性都可以用,不用考慮兼容的問題
4.CSS3的calc()使用
鏈接:https://www.w3cplus.com/css3/...
平時在制作頁面的時候，總會碰到有的元素是100%的寬度。眾所周知，如果元素寬度為100%時，其自身不帶其他盒模型屬性設置還好，要是有別的，那將 導致盒子撐破。比如說，有一個邊框，或者說有margin和padding，這些都會讓你的盒子撐破。我們換句話來說，如果你的元素寬度是100%時，只要你在元素中添加了border,padding,margin任何一值，都將會把元素盒子撐破（標准模式下，除IE怪異模式）。雖然前面介紹的CSS3屬性中的box-sizing在一定程度上解決這樣的問題，其實的 calc()函數功能實現上面的效果來得更簡單。
移動端頁面布局常用哪些屬性？
display: flex
width: calc(50% - 10px);本文轉載於:猿2048→https://www.mk2048.com/blog/blog.php?id=hc1hh22k0jb