2.2 重構網站

mobile first

要想以移動端開始設計，須要先知道通用的尺寸。常見屏幕以下以下：

Device	Viewport Size	Device Resolution
iPhone X	375w x 812h	375w x 812h
iPhone 8 Plus	414w x 736h	1080w x 1920h
Nexus 5X	411w x 731h	1080w x 1920h
One Plus 3	480w x 853h	1080w x 1920h
Samsung Galaxy	360w x 740h	1440w x 2960h
iPad	768w x 1024h	1536w x 2048h
iPad Pro	1024w x 1366h	2048w x 2732h

查看bootstrap的容器尺寸列表：

ES	small	middle	large	EL
<576px	>576px	>768px	>992px	>1200px
<36em	36em	48em	62em	75em

bootstrap的容器恰好能夠分開移動段和ipad端，故採用它的數值。

設計靈感

  開始的想法是我可否去找到一套專業的模板樣式，供我去使用更優質的設計格式，或許會更合理，因而我去找了一些網站：

• https://dribbble.com/
  

dribbble是設計師得到靈感、反饋、社區和工做的地方，也是你發現和聯繫世界各地設計師的最佳資源。

  這個網站有不少看起來很棒的網站樣式，我找了好久，但願能找到一套供本身使用的網站模板，但都不是我想要的樣子。而且我的博客的設計不多，有一些看起來不合個人胃口。而且，我也扣不出裏面的元素，也不能交流他們的設計思路。固然，買是買不起的。

  以後我也乾脆去了google搜索website design，搜索出了不少，看到了一些響應樣式。也讓我有了點底氣。

  總之，我仍是決定用最開始使用的Pokemon元素來編輯個人網站。

設計草圖

  我採用了540px X 960px 的移動端樣式，由於這是bootstrap中小號的尺寸，在大小手機中也能去取箇中位數，由於540px也算36em，很吉利的一個數字。PS畫出樣貌：

  很明顯，在手機端的導航欄是很不友好的，須要通用的漢堡包菜單（hamburger menu）

Menu

  menu的符號是\2261,因爲過小，設置3em。header中的logo與menu採用左右float,再用overflow: auto 塊級格式化BFC。menu中一個button、一個ul，ul沒有用div包裝，由於我須要ul直接flex佔滿全屏。

Button

//定位
    position: relative;
//透明
    border: 0;
    background-color: transparent;
//隱藏
    font-size: 3em;
    width: 1em;
    height: 1em;
    line-height: .5em; //調整位置
    text-indent: 5em;
    white-space: nowrap;
    overflow: hidden;

::before

position: absolute;
    left: 0;
    content: '\2261';
    color: white;
    text-indent: 0;

激活Menu

設置toggle腳本，關聯css文件。

img響應

採用 img srcset與sizes

logo:

<img src="img/logo.png" class="logo"
     srcset="img/logo-small.png 200w,
                          img/logo.png 300w"
     sizes="(max-width: 768px) 200px,
                         300px">

其它相似。

居中

內容主要爲img與文字，能夠直接text-align: center。