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。