臺北益教網ET家族-系管工作日誌

響應式網站學習筆記-4 黃永銘 2014-11-21 10:38

◎圖片：
	(1)不能在HTML中設定img元素的height和width，因為這樣就不能按比例縮放圖片了。為了使流動圖片正常運作，只能用css控制圖片大小。

	(2)需要設定max-width，將max-width設定為100%可以讓瀏覽器不要讓圖片大小超出它的容器元素，例如：下面的<div class="main"><img src="image.jpg" /></div>，如此一來，圖片也不會溢出或被裁剪了!

	.main img{
			width:100%;
			max-width:100%
	}
		
◎混合固定寬度和流動寬度
	如果將某列的display屬性指定為table-cell，就可以混合使用固定寬度和流動寬度的列了：
	
	.main {
			display:table-cell;
			padding:2.5316456% /* 24px/948px */
	}
	
	.aside{      
			display:table-cell;
			width:300px;
	}
	
	縮放瀏覽器邊欄保持300px，內容欄則會進行調整填滿剩餘的區域，使用padding增加兩列的間隔。
	
======= 注意!!display:table的問題：
	1.display:table-cell無法精確定位。
	2.表格對浮動性是不利的。
		
	
	IE8以前版本可以用條件注釋導向另外一個CSS，但是又不想讓Windows Phone 7套用舊ie css格式：
	
	<!--[if (It IE 8) & (!IEMobile)]>
	<link rel="stylesheet" href="/css/ie.css" media="all">
	<![endif]-->
	
	ie.css中的內容欄則改為兩列浮動流動佈局：
	
	.main {
			float:left;
			width:65.8227848% /* 624/948 */
	}
	
	.aside{      
			float:right;
			width:31.6455696% /* 300/948 */
	}

響應式網站學習筆記-5 黃永銘 2014-11-21 10:38

◎媒體查詢--viewport(視口)：
	
	1.需要放在<head></head>中。
	
	2.Width:可以將視口設置為某一特定寬度或裝置螢幕的寬度。
	<meta name="viewport" content="width=device-width"/>
	使用device-width可以讓頁面佈局等於裝置的螢幕寬度。讓手機擺脫需要"放大"頁面後才能看的情況。
	最好不要指定絕對的數值，例如240px，那麼不是240px的裝置只能透過拉伸頁面來配合螢幕。
	
	3.Height：
	<meta name="viewport" content="width=device-height"/>
	不常用到，只有在不想讓頁面垂直滾動的時候才用到，但這種情形並不多見。
	
	4.User-scalable：是否允許使用者縮放頁面。
	<meta name="viewport" content="user-scalable=no"/>	user-scalable=設置為no不僅違背Web本性，也所害了網站的可訪問性。如果不設定，預設值會是yes，所以最好還是清楚的設定一個值：yes或no。
	
	5.inital-scale:初始化畫面的縮放大小。0.1(10%)~1(100%)~10.0(1000%)
	<meta name="viewport" content="inital-scale=1,width=device-width"/>
	
	6.Maximum-scale：使用者可以放大頁面到什麼程度。0.1(10%)~1(100%)~10.0(1000%)
	如果設定為1.0，代表禁止使用者放大，降低網站的可訪問性。Safari預設值是1.6(160%)。
	
	7.Minimum-scale：使用者可以縮小頁面到什麼程度。0.1(10%)~1(100%)~10.0(1000%)
	如果設定為1.0，代表禁止使用者縮小，降低網站的可訪問性。Safari預設值是0.25(25%)。
	
◎媒體查詢語法：

	@media [not|only] type [and] (expr) {
		rules
	}
包括4個基本組成部分：
	1.媒體類型：特定的目標裝置。
	2.媒體表達式：測試某一特性是否為真。
	3.邏輯關鍵詞：可以使用關鍵詞(例如：and,or,not,only)建立更多複雜的表達式。
	4.規則：調整顯示效果的語法。

響應式網站學習筆記-2 黃永銘 2014-11-21 10:37

◎文字：
1. em：最具響應性。
(1)使用em是一種更佳流行，更具靈活性的方法。1em等於桌面瀏覽器預設的字型大小，大部分瀏覽器的預設大小為：16px，1em=16px、2em=32px。
(2)部分行動裝置的預設文字不是16px，可以用"媒體查詢"篩選。
(3)要與文字大小相關時，使用em才更有意義。
(4)IE會讓2em,3em...放得更大，可以透過在body裡面指定font-size:100%繞過這個問題。
(5)rem:root em能避免與嵌套上層元素的em產生連結，
	html原始碼：
	<h1>問題1<span>請在下列選項中選擇適合的答案：</span></h1>
	
	css碼：
	body{
		font-size:100%; /* ~16px */		
	}
	h1{
		font-size:1.5em; /* 24px/16px */
	}
	span{
		font-size:.5em; /* 12px/24px *因為html中被嵌套在h1中，所以基準大小是繼承h1的24px/
		font-size:1rem; /* 16px/16px   改以繼承html元素的字型大小，而不是包含它的div元素，所以基準大小是繼承body的16px*/		
	}
2.百分比：如果預設字型大小是16px，100%=16px,200%=32px，和em沒有太大差別。

	body{
		font-size:100%; /* ~16px */
		font-family:"微軟正黑體", "新細明體";
	}

	h1{
		font-size:1.5em; /* 24px/16px */
	}

	span{
		font-size:.5em; /* 12px/24px */
	}

響應式網站學習筆記-3 黃永銘 2014-11-21 10:37

◎區塊(網格)：用百分比來排版。
	(1)原始固定板面：
	#container{
		width:948px;
	}
	.aside{
		float:right;
		width:300px;
	}
	.main{
		float:left;
		width:624px;
	}
改成流動版面：
	#container{
		width:95%;
		margin:auto 0;
		padding:625em 1.0548523% 1.5em 1.0548523%; /* 10px/16p 10px/948px 24px/16px */
	}
	上下用em，右左用%，之所以這樣做是由上下文所決定的，因為上和下的padding值是由font-size的大小決定的，所以使用em更有以意義。
	
	.aside{
		float:right;
		width:31.6455696%; /* 300/948*/
	}
	.main{
		float:left;
		width:65.8227848%; /* 624/948*/
	}	
	
	(2)Box-sizing：
		 -webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
				  box-sizing: border-box;
				  
	一個width 200px的<DIV>，若padding為10px、border也是10px，不使用box-sizing時，<DIV>實際寬度將為220px(200+10+10)；若box-sizing改為border-box，則<DIV>實際寬度為200px，其內容物範圍寬度為180px(200-10-10)

響應式網站學習筆記-1 黃永銘 2014-11-21 10:35

◎布局：
1.固定布局：頁面寬度會被指定為像素px。使用最普遍寬度是960px。

2.流動布局：頁面寬度會被指定為100%。
優點：可使頁面具有可變的特性。可以設計一個占容器寬度60%的內容欄，一個占容器寬度30%的邊欄，和一個占容器寬度10%的分隔區域。不用再去關心瀏覽者的瀏覽器寬度，元素寬度會隨著瀏覽器視窗的寬度自動調整，不會出現水平滾動條。需要寫的CSS也相對較少。
缺點：有些文字的行寬在大螢幕(例如：連網電視)看起來會太寬，而在小螢幕(例如:手機)看起來會太窄。

3.彈性布局：頁面寬度會被單位指定為em。1em等於桌面瀏覽器預設的字型大小，大部分瀏覽器的預設大小為：16px，1em=16px、2em=32px。
優點：為設計師在排版方面提供高度的控制權。可以將容器的寬度設定為55em，可以使容器維持在一個理想閱讀的寬度了。瀏覽者增大或縮小字型時，元素的寬度也會等比例變化。
缺點：可能會出現水平滾動條。

4.混合布局：結合上述兩種或兩種以上的布局方式。

...