CSS tricks

關於響應式設計@media的基礎只是可以參考CSS3 Media Queries 詳細介紹與使用方法，我剛剛的需求是，手機端覆蓋正常的部分CSS代碼，只需這樣寫就好：

@media screen and (max-width: 767px) {
/* Common borders. */
.page-header,
.comment-list,
.author-info,
.comment-navigation,
.post-navigation,
.hentry:not(:last-child) {
  margin: 0 0 0 0em;
  padding: 0 0 0 0em;
  border-bottom: none;
} 

頁面底部浮動按鈕

<!--html-->
<div style="position: fixed; left: 50%; margin-left: -77px; bottom: 80px; width: 154px; box-sizing: border-box; text-align: center;">
    <div style="padding:10px 0; text-align:center;">  
        <span onclick="fbs_click1()" style="width:44px;height:20px;padding:0px;border-radius:20px;display:block;color:#fff;line-height:30px;z-index:1000; text-align:center;float:left;margin-right:15px;">
            <img src="facebook_share.png" style="width:44px;height:20px;"/>
        </span>
        <span onclick="shareToLine42()" style="width:40px;height:40px;background-color:#6db533;padding:0px;border-radius:20px;display:block;color:#fff;line-height:40px;z-index:1000; text-align:center;float:left;margin-right:15px;">
            LINE
        </span>    
        <span style="width:40px;height:20px;padding:0px;border-radius:20px;display:block;color:#fff;line-height:30px;z-index:1000; text-align:center;float:left;">
            <div class="fb-like" data-action="like" data-layout="button" data-href="https://www.facebook.com/yourPage/"></div>
        </span>   
    </div>
</div>
<!--js-->
<script>
function fbs_click1() { u = "http://yourdomin.com/yourpage"; t = document.title; window.open('https://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t), 'sharer', 'toolbar=0,status=0,width=626,height=600'); return false; };
function shareToLine42(){
  lineUrl="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>";
  window.open(lineUrl, 'sharer', 'toolbar=0,status=0,width=626,height=436');
}
</script>
<!--若要強制facebook彈出窗口的寬度，需添加css-->
<style>
.fb_iframe_widget>span { width: 309px !important; }
.fb-like-box iframe { width: 309px !important; }
</style>

css虛化圖片做背景：參考這兩個http://codepen.io/akademy/pen/FlkzB，http://codepen.io/aniketpant/pen/DsEve。

本文更新於 2016/06/29。