Ray

相對路徑 就是相對於你現在這個檔案的位置

C:\AppServ\www\ready\index.html
C:\AppServ\www\ready\images\test.jpg
C:\AppServ\www\ready\auto\auto.html

 
他是日本北海道札幌區的炎神拉麵，之前在日本也只有兩間左右，要吃到也不是那麼容易的

RWD時：
1.pc樣式到手機樣式需改成float:none再把目標元素寬度改為100%
手機斷點568px

2.把media quary放在所有元件的下方，每個斷點放一個就好，

（圖一是我最喜歡的產品，有阿法奇朵的感覺，這種搭配很特別，冰淇淋融化在布朗尼上再配上冰淇林上的可可醬，很有層次，可以嘗試看看）
餐廳名稱：coco.Brownies 可可布朗
消費時間：2017/12/19

這次上來帶了iphone7 plus 跟 sony a7 + FE 35/F1.4 沒帶腳架，想說以一個極簡的裝備捕捉完美的日出
因為從住處到這裡只需要十分鐘以內所以就騎機車，可以從鼓山一路接萬壽路或者萬壽路直接上去，
路很元旦看日出人又不少，所以騎車務必小心，安全第一。

父元素:

.banner {
    background-image: url(../images/header_desktop.png);
    background-color:black;
    background-repeat: no-repeat;
    background-position: center center;
    height: 420px;
    /* 父元素加入 */
    position: relative;
}

https://purecss.io/
透過他提升對網頁元素的敏銳度，pure.css的元素對所有瀏覽器都有兼容，而且是yahoo團隊製作，所以完成度很高。
 

一、使用width或max-width:
width:100%依照父元素大小而可以自適應延伸，如果父元素太大圖片解析度會變差。
max-width:100%可以放大保有原本寬度，向內縮也可以。
二、rwd時css reset增加幾項
img {
max-width:100%;保持原圖大小，也可向內縮
height:auto;
}
同一張圖片在pc table phone上會越來越大
所以如果用的圖是小圖要使用大圖
避免pad跟phone上圖解析度太差
建議大圖尺寸600X400
三、rwd時banner設定
1.準備大圖小圖兩張圖
2.img用全域設定max-width:100%
height:auto
四、rwd時banner用background-image設定時
height:420px; 高度設定
background-color:black;延伸背景設定（與圖片相關色系）
background-repeat:no-repeat;
background-position:center center;
background-image: url()
@media 寬度600以下換另一張小圖
五、使用img或者background-image的建議：
1.用background-image當banner:Banner裡面如果有放字，
而且要考量在手機上顯示會不會過小，是否要把文字拆出來放。當然純img也可以（使用絕對定位）。
2.電子商務上面的產品列表，通常都是直接插入 img，畢竟你不可能在 css 放各種產品背景圖案，
但也是有跟後端配合時 在HTML標籤上寫 style background ，最後在圖片上面插入文字
有的網站的作法則是 PC一張、Mobile一張，文字太長會導致在手機與桌機上辨識不清楚所以蓋在上面。
3.依照「文字是否要放在圖內」、「圖片有無要設計兩種size以上(PC、Mobile)」、
「思考要怎麼跟後端配合，他要依照什麼規則在後台上圖，前台也會跟著正常」這三點來衡量，
最後再依照設計師提供給的設計稿來決定要怎麼開發 web layout。

固定左邊.menu，右邊.content可自適應的方法：

1.用.wrap包住.menu和.content
2.設定.wrap的max-width寬度
3.設定.menu的width:px寬度

 

 
這款杯子是我一個設計師朋友設計的，是星巴克摩登典藏吧台跟台北101合作限定款，