5自適應網站制作時經常會遇到的一個問題，電腦端頁面縮小到手機端頁面內后發現有些欄目，有些圖片太大或者影響美觀，那么這個問題在嗎解決呢？

手機端最典型的就是iphoenplus最大寬度是414目前市場上占有率最大的大屏手機也差不多是這樣，所以就可以寫成當屏幕尺寸小于414px的時候屏幕下面所有的樣式，為了不產生屏幕大小不一產生不同的樣式錯亂，所以這里建議寫到480px，這樣就囊括了基本上所有的手機屏幕了。

然后接下來就是隱藏手機屏幕下不該顯示的內容，比如手機端我不想讓別人看到我的友情鏈接，或者不想讓顯示出來太大的幻燈片。都可以用 display:none;這個命令來實現。

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

.footer {

display: none;

}

}

css隱藏內容主要分為3總情況：

①隱藏所有內容無空白：display: none;

②隱藏溢出的文字或圖片：overflow:hidden;

③隱藏內容但是仍然占據空間：visibility:hidden;

網站自適應css隱藏只是基礎知識，對于隱藏最常見的用途就是js的一些特效展示。

來源：王塵宇博客，歡迎分享

文主要介紹了網頁布局中左側固定，右側自適應的兩種實現方法，相信對大家初學網頁布局會有很好的幫助！

第一種方法代碼如下：

第二種實現方法代碼如下：

想學習更多技術，請關注“恒星網絡”頭條號！

than Marcotte曾經在A List Apart上發表過一篇名為“Responsive Web Design”的文章，他當時就提出了響應式架構的概念（不少混跡技術圈的肯定看過這篇文章，這里就不再贅述了）。隨著終端設備的日益豐富，無法針對設備類型、尺寸或瀏覽器進行自適應調整的圖像會嚴重減慢網站的訪問速度，最終導致用戶流失。

談到圖片自適應，很多前端開發人員會不假思索的來一句“寬度100%”，但是在寬度自適應的同時如何保證圖像不失真呢？近日，關于該問題一位網友的回答引起了大家的激烈爭論，我們先來看看這位網友是如何解決該問題的：

沒錯，就是這么一行簡短的代碼！部分前端開發者認為這行代碼既簡潔又高效，很好地解決了圖片自適應問題，但有部分前端開發者認為這種方法無法解決分辨率問題，無法保證圖片不失真，這個問題到底應該如何解決呢？

一個圖像版本顯然是不夠的，為了確保各個屏幕尺寸之間的平滑過渡，設計師必須以不變應萬變。也就是說，必須采取靜態的方式使圖像適應性更強。對于靈活的布局大小和屏幕密度的多樣性都有相同的解決方案：提供可變分辨率的圖像。圖片分為背景圖片和通過img標簽引入的圖片，我們是應該使用高分辨率圖像來利用高分辨率硬件，還是使用小圖像以便在低分辨環境中快速加載？

通過提供同一圖像的不同版本（大小和分辨率），可以向需要的網站訪問者發送高分辨率版本，為不具有此功能的網站提供較低分辨率的版本。要了解需要多少不同版本，可以采取以下步驟：

• 建立尺寸和分辨率范圍的極限，并記錄各種尺寸和分辨率。

• 使用新的響應式圖像標記來標記備用版本，以便瀏覽器可以加載最適合用戶屏幕分辨率和窗口大小的版本。

具體到代碼級，前端開發應該怎么做呢？

某知識平臺中標簽為“JavaScript開發者”的網友的回答贏得了不少人的贊同：

面對格式問題，我們可以盡量讓瀏覽器替我們決定。過去，實際上只有四種圖像格式具備通用接受性：GIF，JPEG，PNG或SVG。然而，今天的響應式，太多可變格式的圖像允許開發者使用新的技術，以便可以在支持的瀏覽器中使用其他更新更好的格式，在不支持的瀏覽器中繼續使用舊格式。

當然，也有網友提到了一種未來可能被大量普及，但目前已經被應用有效果的解決方案，同時該解決方案也是開源的：

如果對這部分很感興趣，不妨讀一下《Head First Mobile Web》一書，這本書中提到過一個叫http://Sencha.io Src的第三方服務，把img的src屬性設置為http://scr.sencha.io/http://xxxx(圖像域和路徑)，http://Sencha.io Src會根據設備分辨率壓縮原圖創建一個適合的圖像提供給訪問設備。

http://Sencha.io是國外服務，前端開發者可以嘗試在國內是否可用并且效果如何。當然，如果國內有類似服務也可以嘗試使用。響應式圖像很無聊，但是它使開發者能夠設計出當今消費者所需要的沉浸式體驗，而不會犧牲圖片質量或頁面加載速度，現代Web開發需要這些響應式圖像。

綜述

網站加載時間延遲一秒就可能會導致網站轉化率下降7％，創建響應式Web環境是棘手的，它需要微妙的平衡。但是，在不同屏幕尺寸和設備功能的世界中，建立這種圖片自適應是必要的?？偨Y下來基本是兩種方法：如果不在乎分辨率，開發者可以沿用寬度100%的方法，這種方法是最簡便的；如果需要考慮分辨率，就需要查詢清楚不同設備的分辨率，然后采用第三方服務或在代碼層自主進行設置。