Responsive設計的十個基本技巧(4)

　　“em”單位：先在一個主容器中或者""中定義一個字體大小(font-size)，把它做為基本單位，然后其他元素以此做為基準來計算出相關的值

　　“em”和“px”之間的轉換是有些技巧的，如果你從來沒有了解過他們之間的關系，我建議你先閱讀一下這篇文章《CSS中強大的EM》，簡單一點的，可以看看下圖：

　　八、移動端上的效果

　　在移動端設備，特別是小屏的移動手機上，所有的內容都將在一個列中顯示，這個時候，我們就需要對樣式進行一定的處理，首先來看一個布局的對比：

　　PC桌面上的layout

　　這樣的布局，在我們手機上將顯示成這樣：

　　那我們要怎么來實現這兩種布局的轉變呢?實現方法很簡單：只需要在你的mobile樣式表中覆蓋每一個元素的寬度，將原來的寬度轉換成“100%”

　　是不是我們需要在移動手機樣式中為每一個不重要的元素添加移去的樣式呢?其實不用，我們只需要在不重要的元素中添加類名“not_mobile”，然后在手機樣式中添加：

　　@media screen and (max-width:300px) {

　　.not_mobile{display: none;}

　　}

　　十、檢查你的viewport

　　玩過移動端的同學可能都知道，許多移動端的瀏覽器模擬了桌面PC機下瀏覽器，你的web頁面在移動端的瀏覽器瀏覽時，整個頁面會直接壓縮顯示在一個屏幕下。這可是一個強大的功能，但也是Responsive致命的一功能。

　　看一個我在網上截圖來的對比圖：

　　針對這種情況，我可以使用“meta”屬性來讓其顯示正常：

　　< meta name="viewport" content="width=device-width">

　　那么到這給與大家分享了制作Responsive設計的十個基本技巧，如果你對Responsive設計感興趣的話，你可以打開“Mediaqueri.es”查看一些優秀的案例。最后希望這篇文章能給你帶來些許的幫助。如果你有更好的分享，我們可以一起探討。

　　特別聲明:本文中提供的鏈接都是可能打開的，如果你碰到了打不開的網站，請先開啟你的VPN服務。

原文轉自：http://www.kjueaiud.com