為了RWD效果滿常使用到的CSS3寫法,
簡單定義3種大小裝置與使用情境範例:
1.只有PC要顯示時 pc-only
2.只有Pad要顯示時 pad-only
3.只有Mobile要顯示時mobile-only
4.只有pc和pad大小要顯示時 pad-pc-only
5.只有mobile和pad大小要顯示時 pad-mobile-only
CSS:
@media (max-width:767px){
.pad-pc-only {
display:none;
}
.pc-only {
display:none;
}
.pad-only {
display:none;
}
}
@media (min-width:768px) and (max-width:1024px) {
.mobile-only{
display:none;
}
.pc-only {
display:none;
}
}
@media (min-width:1024px){
.mobile-only{
display:none;
}
.pad-only {
display:none;
}
.pad-mobile-only {
display:none;
}
}
HTML:
<body>
<label class="pc-only">PC</label>
<label class="mobile-only">MOBILE</label>
<label class="pad-only">PAD</label>
<br/>
<label class="pad-pc-only">PC/PAD</label>
<label class="pad-mobile-only">PAD/MOBILE</label>
</body>