響應式開發網站

leap_frog 發布于2019-08-01 16:25 / 1163人閱讀

摘要：響應式布局，先看效果大屏效果中屏效果小屏效果下面是一些筆記心得響應式網站的優點減少工作量網站，設計，代碼，內容都只有一份做少量更改節省時間多個分辨率設備都能正確顯示搜索優化缺點會加載更多的樣式和腳本資源設計比較難精確定位和控制老版本瀏覽器的

FlexLayout

https://github.com/whhlulu/Re...

響應式布局，先看效果 大屏效果：>50rem

中屏效果：>30rem, <=50rem

小屏效果：<30rem

下面是一些筆記心得

================================================
PART I：
響應式網站的優點：
1 減少工作量
1）網站，設計，代碼，內容都只有一份
2）JS,CSS做少量更改
2 節省時間
3 多個分辨率設備都能正確顯示
4 搜索優化

缺點：
會加載更多的樣式和腳本資源
設計比較難精確定位和控制
老版本瀏覽器的兼容問題

================================================
PART II：
主流瀏覽器
Chrome
IE/Edge（Edge : > 12)
Firefox
QQ（微信采用QQ瀏覽器X5的內核）
Safari/iOS Safari
360
UC
獵豹

================================================
PART III：
媒體查詢 1
@media all and(min-width:800px) and (orientagion: landscape){

...

}

邏輯操作查詢符：not and only , (, 等同于 or) css3媒體屬性

width: 視口寬度
height: 視口高度
device-width: 渲染表面的寬度，就是設備屏幕的寬度
device-height:渲染表面的高度，就是設備屏幕的高度

orientation:檢查設備處于橫向/縱向
aspect-ration:基于視口的寬高比
device-aspect-ratio: 渲染表面的寬度，就是設備屏幕的寬度
color:每種顏色的位數bits，比如 min-color:16位，8位
resolution:檢測屏幕或打印機的分辨率，如： min-resolution:300dpi

以上屬性都可以添加 min- 或 max- 前綴

================================================
媒體查詢 2
width: 視口寬度
device-wdith

viewport 視口
針對PC，只有一個視口
針對移動設備，有三個視口：
布局視口(layout viewport)
可視視口(visual viewport)
理想視口(ideal viewport)

===============================================
強制使用最新版本的IE文檔模式

===============================================
cssreset.css 用來消除所有瀏覽器在一些默認樣式上面的差異
normailize.css 是 cssreset.css 的優化版本，使用更加廣泛

===============================================
長度單位： px, em, rem
使用相對的值，不同的顯示屏尺寸會有變化
px : 固定的單位
em : 相對的長度單位，參照了父元素的font-size，具有繼承的特點，如果一直找父容器都找不到font-size，那會使用瀏覽器的默認em設置：1em = 16px
rem ：也是使用相對值，不過是參照了 html 元素，瀏覽器的默認值也是：1rem = 16px

云服務器 GPU云服務器響應式網站響應式網站代碼響應式響應式布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50508.html

響應式設計個人的一些總結

摘要：所以一個網，甚至是響應式設計，在兩個平臺上都會損害您整體的。三響應式與如果把網站作為一個單獨的網站，如果網站的內容與桌面版的內容相對缺少，導致用戶回到桌面端的網站，會記錄這種選擇，使搜索排名降低，國內百度就不知道會怎樣。一、為什么需要響應式設計（responsible web design） 1. 響應式發展背景 1、屏幕尺寸的快速變化，iphone為320x480，分辨率在未來可以...

LeoHsiun 2019-08-01 15:32 評論0 收藏0
自適應/響應式的功課.....

摘要：請開始清算市面上的電子產品得有百八十種的屏可以供君挑選這其實對在前端一線工作的程序員而言挺災難的自適應響應式概念解決不同終端的適配問題我們一般有兩套方案一是自適應布局二設置響應式布局所謂的自適應就是屏幕變大或是變小它的內容也要做到同步縮放到請開始清算市面上的電子產品,得有百八十種的屏可以供君挑選....這其實對在前端一線工作的程序員而言挺災難的....showImg(https://...

Fourierr 2019-08-30 14:05 評論0 收藏0
移動優先的響應式布局

摘要：雖然兼容性方案的體驗不如常規方案，但保證了功能可用性移動優先的響應式布局采用的是漸進增強原則，制作響應式網站時，先搞定手機版，然后再去為更大設備去設計和開發更復雜的功能。前面的話　　隨著移動互聯網的興起，不同設備的分辨率相差較大，如果在不同的設置上顯示同一個頁面，則用戶體驗差。響應式網頁設計是一種方法，使得一個網站能夠兼容多個終端，而不用為每個終端制作特定的版本。它使得一個網站可以在任何類...

番茄西紅柿 2019-04-23 13:43 評論0 收藏0
響應式網站的優缺點

摘要：優點如下在不同設備下能有不同的頁面排版，這也是響應式最大的優點，在分辨率不同，設備環境進行一些不同的設計，所有開發維護和運營上，相對多個版本成本會降低很多。對于響應式，前端工程師應該不會陌生，響應式網站是老外在2010年提出來的，是為了能讓網頁在不同設備下兼容多個終端，而不是為每個終端特定一種版本。優點如下：1.在不同設備下能有不同的頁面排版，這也是響應式最大的優點，在分辨率不同，設...

pepperwang 2019-08-29 12:12 評論0 收藏0
響應式網站的優缺點

摘要：優點如下在不同設備下能有不同的頁面排版，這也是響應式最大的優點，在分辨率不同，設備環境進行一些不同的設計，所有開發維護和運營上，相對多個版本成本會降低很多。對于響應式，前端工程師應該不會陌生，響應式網站是老外在2010年提出來的，是為了能讓網頁在不同設備下兼容多個終端，而不是為每個終端特定一種版本。優點如下：1.在不同設備下能有不同的頁面排版，這也是響應式最大的優點，在分辨率不同，設...

王陸寬 2019-08-01 16:28 評論0 收藏0