手機眾多裝置的螢幕顯示大小不同,會因為排版時區塊及圖片可用百分比達到顯示等比縮放,但唯獨文字沒辦法設定依照顯示的百分比去做縮放。

就因為這樣設計排版上,主要視覺區塊內的文字,大小設計剛好在區塊內,以不同顯示比例去看,區塊及圖片會因為設定成百分比而依照螢幕大小縮放,但文字確保持在您設定的大小,這就會產生區塊有自動縮放大小,文字卻沒有自動縮放大小,使得你設計的版面跑位或不是你所要呈現的設計樣子。

Add a comment

IE8在css使用max-width時會有如下圖失真的情形發生。
 

選擇器之間使用大於符號

選擇父元素的子元素,不包括子元素的子元素

css選擇器使用大於符號可以選擇不含元素內的其他相同子元素,這個語法簡單的使用符號大於[ > ]在選擇器之間。

以下範例可以看出在CSS語法.div1 > p字體顏色為紅色 ,.div1裡面的子元素<p>div1-P2</p>,因為外面父元素為<span>.div1 > p使用[ > ]符號,所以受引響的只有.div1下一層級的<p><p>div1-P2</p>一樣是呈現原來的黑色文字。若沒有使用[>]符號則連同子元素內的,所有<p>都會受樣式影響呈現紅色文字。

<style type="text/css">
    .div1 > p {
        color: red;
    }

    .div2 p {
        color: red;
    }
</style> 

<div class="div1">
    <p>div1-P1</p>
    <span><p>div1-P2</p></span>
</div>

<div class="div2">
    <p>div2-P1</p>
    <span><p>div2-P2</p></span>
</div>
Add a comment

使用50%設定top 與 left,再用margin-top ,margin-left 減去元素的高度寬度。

如:top:50% 元素的上方對齊頁面正中央了,再用 margin-top:-100px 將元素向上移動一半 (元素高度為 200px),讓中心點對齊頁面正中央。

Add a comment