在font-size的設定用vw或vh當單位,其中vw是相對畫面寬度,vh是相對畫面高度。
參考資料: css-tricks Viewport Sized Typography
但是手機的瀏覽器好像不支援?行動裝置好像要用em當單位,可是em當單位在一般瀏覽器好像又不行?
後來我在手機瀏覽模板的style.css檔裡面增加一個div的設定來解決。
在font-size的設定用vw或vh當單位,其中vw是相對畫面寬度,vh是相對畫面高度。
參考資料: css-tricks Viewport Sized Typography
但是手機的瀏覽器好像不支援?行動裝置好像要用em當單位,可是em當單位在一般瀏覽器好像又不行?
後來我在手機瀏覽模板的style.css檔裡面增加一個div的設定來解決。
每個訪客的畫面都不一樣大,為了讓背景圖片可以跟著縮放,可以在網頁裡加上這樣的語法。其中第一段是利用java script判斷訪客的畫面大小,第二段是用css調整背景圖片尺寸。
第一段,請加在script的標籤之間:
for (var i = 0; i < images.length; i++) {
var image = images[i],
width = String(image.currentStyle.width);
if (width.indexOf('%') == -1) {
continue;
}
image.origWidth = image.offsetWidth;
image.origHeight = image.offsetHeight;
imgCache.push(image);
c.ieAlpha(image);
image.style.width = width;
}
第二段,請加在style的標籤之間:
body {
background-image: url(welcome.jpg);
background-size: 100%;
}
資訊來源:http://stackoverflow.com/questions/376253/stretch-and-scale-css-background