Browsed by
標籤:browser

[Chrome] 清除快取的三種方法

[Chrome] 清除快取的三種方法

1.全域

  1. 滑鼠點選右上角展開選單,選擇「設定」。
  2. 找到隱私權區塊,點選「清除瀏覽資料」。
  3. 自行指定要清除的類型與時間。
    161220_01

 

2.單一網站

  1. 開啟 Chrome Developer Tool 介面。(快速鍵:F12Ctrl+Shift+I,MAC 使用者按 Command+Shift+I )
  2. 切換到介面上的「Application」分頁。
  3. 點選介面左側選單「Clear storage」,勾選要清除的類型後,按下「Clear site data」。
    161220_02

 

3.單一頁面 (最快最方便,推薦)

  1. 開啟 Chrome Developer Tool 介面。(快速鍵:F12Ctrl+Shift+I,MAC 使用者按 Command+Shift+I )
  2. 滑鼠右鍵點選左上角 Reload 按鈕,在 Developer Tool 介面下會出現三種不同的 Reload 方式。
  3. 點選第三種「清除快取並強制重新載入」。
    161220_03

 

 

 

 

[CSS] 以CSS Media Requires實作瀏覽器大小偵測

[CSS] 以CSS Media Requires實作瀏覽器大小偵測

網頁排版時,考慮不同終端設備瀏覽大小是很重要的一環
解析度過小造成跑版,過大時把一些區塊size寫死又會造成頁面太空曠
RWD(Responsive web design) 的第一步,便從這開始

CSS的媒體查詢(Media Requires)語法

 

可以查詢的項目很多,不過RWD最常用的是min-width、max-width、min-height 和 max-height。
min-width:任何超過查詢中指定寬度的瀏覽器都會套用規則。
max-width:任何未超過查詢中指定寬度的瀏覽器都會套用規則。
min-height:任何超過查詢中指定高度的瀏覽器都會套用規則。
max-height:任何未超過查詢中指定高度的瀏覽器都會套用規則。
有涉獵過的人應該也知道還有device-width這個東西
但是device-width是針測裝置的螢幕的大小,而非檢視區的大小
通常只用在行動裝置上,建議還是以上面列舉的四項屬性為主。
下面列舉三種不同大小,更換不同背景顏色

 

也可以在link tag的media attribute寫入規則,來引入不同的樣式表

 

這裡有一些可以觀看一些RWD的例子:
http://mediaqueri.es/ 
Reference:
http://fundesigner.net/responsive-web-design-explain/
http://fundesigner.net/css3-media-queries/
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=zh-tw#section