使固定寬度的網站移動友好
已發表: 2017-06-21最後更新於 2020 年 5 月 22 日
構建移動友好。 曾經有一段時間，作為平面設計師和 Web 開發人員，我最擔心的是在 Internet Explorer 中創建 CSS 功能。 不僅 IE 仍然是個後顧之憂，現在我們不得不擔心眾多的屏幕尺寸和操作系統。
會有一段時間，移動端瀏覽會超過桌面瀏覽。 由於移動設備在我們的日常生活中變得如此突出，因此有時我們的網頁設計師需要立即獲得結果。 如果您是那些沒有時間將靜態網站轉換為 WordPress 主題的設計師或程序員之一，一個移動友好的主題，我的朋友，您有希望。 在移動設備上查看您的所有內容時，您可以通過一些 CSS 和 HTML 優化來實現這一點。
http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png
那！ 公司為世界各地的代理機構提供迷人而有效的網頁設計服務。 詳細了解我們的白標網頁設計服務以及我們如何幫助您和您的客戶創建或改善他們的網絡形象。 今天就開始吧！
根據 comScore 的數據，在全球範圍內，移動設備佔在線時間的一半以上
移動友好或響應式網站能夠自動配置網站的寬度，以適應查看者的設備。 水平滾動條是響應式設計中的禁忌。 如果您在移動設備上查看當前網站，並且在手機或平板電腦底部看到滾動條，則您的網站（或網站元素）可能不適合移動設備。 這些水平滾動條會破壞用戶的體驗，並且很可能會單擊返回按鈕。 人們習慣於在他們的設備上垂直滾動，因此當用戶發現自己必須垂直和水平滾動才能查看內容時，他們會感到不舒服並離開網站。
從這一點開始，它是包羅萬象的，設計網站對所有東西都有 CSS 類和 ID，我的意思是一切。
從頁眉和菜單 div 到頁腳中的 <p> 標籤。 您需要根據屏幕寬度調整所有這些東西的大小。 當元素可以通過 CSS 定位時，移動、調整大小和縮放會容易得多。
CSS 媒體查詢比你想像的更容易使用。
媒體查詢第一次引起我的注意時，我認為它是編程語言的一部分，而不是 CSS 的一種形式。 當我發現它真正是什麼時，我感到如釋重負，從那以後我就一直在我所有的網絡項目中使用它。
媒體查詢基本上是 CSS 規則。 如果你的屏幕是這個寬度，那麼只將這個 CSS 應用到這些元素上。 看看下面。
@media only screen and (min-width: 100px) and (max-width: 699px) {
身體{背景顏色：藍色}
}
所以上面的代碼只是說如果用戶的屏幕寬度在 100px 到 699px 之間，那麼將 body 的背景顏色更改為藍色。 這就是標記站點中的每個 div 和 span 變得至關重要的地方。 通過適當的標記，為不同的屏幕寬度操作這些元素變得更加容易。
Css-tricks.com 列出了許多移動寬度供我們快速參考。
/* ———– Galaxy S5 ———– */
/* 縱向和橫向 */
@媒體屏幕
和（設備寬度：360px）
和（設備高度：640px）
和 (-webkit-device-pixel-ratio: 3) {
/*****你的代碼在這裡*****/
}
/* ———– HTC One ———– */
/* 縱向和橫向 */
@媒體屏幕
和（設備寬度：360px）
和（設備高度：640px）
和 (-webkit-device-pixel-ratio: 3) {
/*****你的代碼在這裡*****/
}
/* ———– iPhone 5 和 5S ———– */
/* 縱向和橫向 */
@media 僅屏幕
和（最小設備寬度：320px）
和（最大設備寬度：568px）
和 (-webkit-min-device-pixel-ratio: 2) {
/*****你的代碼在這裡*****/
}
/* - - iPhone 6 - - */
/* 縱向和橫向 */
@media 僅屏幕
和（最小設備寬度：375px）
和（最大設備寬度：667px）
和 (-webkit-min-device-pixel-ratio: 2) {
/*****你的代碼在這裡*****/
}
Galaxy、HTC 和 Apple 手機的媒體查詢代碼要多得多。 此外，還列出了 Ipad、Galaxy 和 Nexus 平板電腦的寬度。 您所要做的就是將此代碼輸入到您網站的 CSS 文件中，並用您自己的代碼填寫空白 CSS 括號！ 完畢！
您的網站響應迅速，但仍然感覺不太對勁
您可能會開始注意到您網站上的某些元素在移動設備上佔用了相當多的空間，例如您的主菜單。 為了使其具有響應性，您很可能在菜單中的 <li> 標籤上應用了“float: none”。 但是現在菜單在您的網站頂部佔據了很大一部分空間。 您需要使用 jQuery 和 CSS 媒體查詢將主菜單轉換為下拉菜單。 Css-tricks.com 也解釋瞭如何做到這一點。
您也可能認為某些元素無關緊要，可以在桌面和移動設備上找到。 . 您可以使用 CSS 擺脫它們：
#main-content .sidebar img {顯示：無}
}
這些網站調整傾向於使網站變得非常長，吸引用戶大量滾動。 這就是錨文本（對於有視力的用戶）或跳過鏈接（對於屏幕閱讀器）成為您朋友的地方。
錨文本是一個可點擊的鏈接，允許用戶跳轉到網頁的某個部分，而無需滾動。 對於移動友好型網站來說，這是一種方便的方法。 下面的代碼是錨文本鏈接的示例。
<a href="#skip">點擊此處跳至主要內容</a>
<a id="skip"></a>主要內容從這裡開始
跳過鏈接主要用於屏幕閱讀器，允許殘障用戶繞過或跳過重複的 Web 內容，如菜單導航，並直接訪問他們感興趣的信息。
如果跳過鏈接的 CSS 規則為“display:none”，屏幕閱讀器將變為“無法訪問”。 因此，解決此問題的一種方法是將鏈接放置在屏幕外，這樣屏幕閱讀器仍然可以識別您的鏈接，並允許他們跳過您的新移動網站。
.跳過鏈接{
位置：絕對！重要；
頂部：-9999px！重要；
左：-9999px！重要；
}
因此，這是將您的固定寬度網站轉換為移動友好網站的快速簡便方法。 另外，不要忘記將所有圖片設置為“width: 100%; 高度：自動。” 任何以像素為單位設置寬度的圖像、div 或 span 都將創建到移動設備上的水平滾動條，因此請記住為使用媒體查詢的不同設備將它們設置為百分比或不同寬度。
這可能有點耗時，但相信我，一旦你學會了它，你就會永遠使用它。 您將在您將要做的每個網站上使用此方法，因為即使是最新的 WordPress 或 Joomla 響應式主題和模板也需要進行一些修改才能使它們看起來像您想要的那樣。 隨著移動設備市場的不斷變化，尤其如此。
這可能有點耗時，但相信我，一旦你學會了它，你就會永遠使用它。 點擊推文-Izzak Hale，高級平面設計師