把時間浪費在有質感的事物上

目前日期文章:201712 (14)

瀏覽方式: 標題列表 簡短摘要

父元素:

.banner {
    background-image: url(../images/header_desktop.png);
    background-color:black;
    background-repeat: no-repeat;
文章標籤

READY sharing 發表在 痞客邦 留言(0) 人氣()

logo_pure@2x

https://purecss.io/

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

 

 

文章標籤

READY sharing 發表在 痞客邦 留言(0) 人氣()

一、使用width或max-width:
width:100%依照父元素大小而可以自適應延伸,如果父元素太大圖片解析度會變差。
max-width:100%可以放大保有原本寬度,向內縮也可以。

二、rwd時css reset增加幾項

文章標籤

READY sharing 發表在 痞客邦 留言(0) 人氣()

固定左邊.menu,右邊.content可自適應的方法:

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

READY sharing 發表在 痞客邦 留言(0) 人氣()

 

S__3825684.jpg

 

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

摩登典藏吧台今年2017年十一月才開幕,是星巴克提出的金字塔四階層中的第三層,

文章標籤

READY sharing 發表在 痞客邦 留言(0) 人氣()

一、如何判斷用什麼響應式斷點?
1.如果有舊網站,就使用google analytics分析觀察數據判斷。
2.如果沒有舊網站,就以最熱門解析度為主。

二、熱門解析度有哪些?

文章標籤

READY sharing 發表在 痞客邦 留言(0) 人氣()

『RWD』用UI/UX思考進行響應式網頁設計

rawpixel-com-340967  

  1. visual route:考量使用者的視覺動線,非所有內容都要放進去
  2. human factor:一行文字內容剛剛好的字數很重要,滿版的文字對於視覺來說負擔太大,太短的行寬對視覺來說換行頻率又太頻繁。RWD依照文字多寡來換成單行或雙行。
  3. finger experience:增加每行的上下padding(44px為佳),以增加使用者手指操作體驗。
  4. less is more:把真正重要的PC端元素放入手機端就好就好。例如:製作響應式網頁時,頁面中的「產品內容」就是重要的,必須留下來。
  5. difference of manipulation:PC時考慮滑鼠hover、mobile時考慮手指touch,依照不同載具做不同考量。
  6. show and hide:考慮不同斷點要出現的元素,以及要隱藏的元素。例如:寬螢幕解析度時漢堡選單需隱藏、窄螢幕解析度時並列水平並列的選項需更改顯示方式。
  7. software assist:用chrome 的 responsive inspector 偵測斷點,搭配mediaqueri.es,來了解斷點設計。

READY sharing 發表在 痞客邦 留言(0) 人氣()

A1020247  

會選這本書來分享主要是因為自己也有投入食品相關產業

在這個領域想要了解更多,更深入,

READY sharing 發表在 痞客邦 留言(0) 人氣()

demo:



文章標籤

READY sharing 發表在 痞客邦 留言(0) 人氣()

rwd版型排版觀念:

  1. 用width會出現x軸bar,這個狀況是響應式設計不允許出現的
  2. 用max-width可以自適應內容
  3. 用%會依照父元素(瀏覽器)寬度來算比例(父元素為100%,子元素相加為100%)
  4. 不管設計幾欄版面,總和的%數要加起來為100%
  5. 左側float固定,右側流體設計,右側用margin-left往左推
  6. 在斷點時可以清除浮動float:none,加上自適應螢幕解析度width:100%。斷點時再把margin-left歸零
  7. rwd時的css reset可以加入兩行
*,*:after,*:before {
    box-sizing:border-box;
}
img {

READY sharing 發表在 痞客邦 留言(0) 人氣()

螢幕快照 2017-12-28 上午10.30.49

 

 

 

 

文章標籤

READY sharing 發表在 痞客邦 留言(0) 人氣()

FullSizeRender-10  

那天晚上準備要去新北耶誕城,想說下午就安排來吃日式甜點吧

小樂堂在大坪林站旁的小巷子裡面,出站大約3分鐘可以走到

自己對在巷弄裡面的店情有獨鍾,想說跟大馬路旁的店家比起來少了過路客的他們

他們一定是有某些吸引力,才能夠讓人們願意特地到巷子裡面找他們

文章標籤

READY sharing 發表在 痞客邦 留言(0) 人氣()




@media (max-width: 767px){
.menu {
/*隱藏選單開始*/
文章標籤

READY sharing 發表在 痞客邦 留言(0) 人氣()

IMG_2130.HEIC

身為蘋果控一定會想要自己身邊的東西除了apple的東西以外,也都是很有質感的吧!

先不介紹這個品牌,我知道的是incase他們是一個專門做apple周邊產品的美國品牌,

這是我第一個incase產品,外型很洗鍊簡潔,這是我挑東西的考量之一。

跟我的macbook pro 15"合照,跟moleskine 2018筆記本合拍一張,

文章標籤

READY sharing 發表在 痞客邦 留言(0) 人氣()