2016年11月8日 星期二
RWD 欄位設定
3欄式sample
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/all.css">
</head>
<body>
// 重點就是有 6個li
<div class="wrap">
<ul class="news">
<li>
<h2>大標題</h2>
<p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
</li>
<li>
<h2>大標題</h2>
<p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
</li>
<li>
<h2>大標題</h2>
<p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
</li>
<li>
<h2>大標題</h2>
<p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
</li>
<li>
<h2>大標題</h2>
<p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
</li>
<li>
<h2>大標題</h2>
<p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
</li>
<li>
<h2>大標題</h2>
<p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
</li>
</ul>
</div>
</body>
</html>
========================================================================
css:
重點就是這個css了
上面的setting 是以pc 來設定.... 為三欄式....
width: 31.33333%; -> 100/3 -1 -1
.wrap {
max-width: 960px;
padding-top: 20px;
margin: 0 auto;
line-height: 1.5;
}
.news h2 {
color: #000000;
padding: .3em 0;
font-size: 20px
}
.news li {
width: 31.33333%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1em;
float: left;
}
@media (max-width:768px) {
.news li {
width: 48%; // 如果是平板...768 px 以下....就覆蓋 width 的設定....改成 100/2-2
// 兩欄式設計
}
}
@media (max-width:569px) {
.news li {
width: 98%; // 如果是平板...768 px 以下....就覆蓋 width 的設定....改成 100/1-2
// 單欄式設計
}
}
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言