關於響應式設計@media的基礎只是可以參考CSS3 Media Queries 詳細介紹與使用方法，我剛剛的需求是，手機端覆蓋正常的部分CSS代碼，只需這樣寫就好：
1 2 3 4 5 6 7 8 9 10 11 12 | @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;} |
頁面底部浮動按鈕
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!--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(){ 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。