關閉Chrome 12px字體大小限制

網頁設計時檢查遊覽器相容,發現設定12px以下字體,在goole chrome遊覽器卻都無效,上網查了一下結果,原來chrome遊覽器的預設限制最小字體為12px。
查詢了一下解決方法,就如下面的簡單語法,將chrome字體大小的限制關閉。

*PC桌面版的Chrome27正式取消了-webkit-文字大小調整屬性的支持,實際上是修正了原有的錯誤
 

-webkit-text-size-adjust:none;

 

Add a comment

選擇器之間使用大於符號

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

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

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

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

Add a comment

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