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

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

 

 

Comment

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

css選擇器使用大於符號

子選擇器(選擇器之間使用大於符號):選擇父元素的子元素,不包括子元素的子元素

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

以下範例可以看出在.div1 > p ,div1裡面的子元素div1-p2不受父元素引響,一樣是原來的黑色文字。若沒有使用[>]符號則連同子元素內的所有p,都會受樣式影響呈現紅色文字。

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

  .div2 p {
  color: #F00;
  }

  </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>

Comment

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

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

Copyright © 2018 ucamc