響應式網站設計心得

時間 2020-05-21

標籤響應網站設計心得欄目網站開發简体版

原文原文鏈接

**響應式網站一招致勝 學習心得**css

代碼改變世界html

quick start

ethan marcottehtml5

響應式提出css3

響應式原文翻譯git

響應式原文翻譯2github

響應式豆瓣原文翻譯web

響應式豆瓣原文翻譯2瀏覽器

瀏覽器市場佔有率統計app

caniuse https://caniuse.com/frontend

工具測試canius支持度： https://www.jianshu.com/p/61ab19b627a1

statecounter http://gs.statcounter.com/

媒體查詢

css2開始 media媒體查詢出現

<link rel="stylesheet" type="text/css" href="xxx.css" media="screen">

css3加強媒體查詢

媒體類型

函數

@media all and ( min-width:800px) and (orientation:landscape){

    ...

}

all 可省略（默認）
screen
print
and
or | ，
not
only 老的設備上不識別就帶上

css 媒體屬性介紹

width 視口寬度
height 視口高度
device-width 渲染表面寬度就是設備屏幕寬度
device-height 渲染表面高度就是設備屏幕高度

以上屬性均可以添加min- max- 前綴
orientation 設備處於橫向仍是縱向
aspect-ratio 基於視口的寬高比
device-aspect-ratio 渲染表面的寬度就是設備屏幕寬度
color 每種顏色的位數 bits 。 min-color ：16位，8位
resolution 檢測屏幕|打印機分辨率

viewport 3種視口

佈局視口 960px
可視視口設備寬度
理想視口把佈局視口等於但是視口就是理想視口

開發一個網站準備

思考：

解決什麼？
受衆是誰？
如何呈現？
如何組織？

前期step：

需求分析
原型設計
UI設計

開發頁面

html5 不區分大小寫單雙引號

<!doctype html>

head中編碼 utf-8

IE兼容性：

IE能識別的腳本:

<!--[if lte IE8]>

<p>你的瀏覽器太老了，請  <a href="https://browsehappy.com/">更新</a></p>

<![endif]-->

不一樣瀏覽器下載地址

https://browsehappy.com/
html 大綱生成頁面

http://gsnedders.html5.org/outliner/

UI頁面結構書寫

分析設計圖寫出頁面結構

順便添加class屬性名，爲後續class樣式作準備

注意相似遞歸的方式去寫結構 大到小 外到內
重置樣式 reset.css normalize.css

http://necolas.github.io/normalize.css/

這裏咱們如今都通常直接使用normalize.css

在此基礎上進行一些覆蓋
px em rem 單位

設置 rem 相對好些 html {font-size: 62.5%} 後 1rem = 10px

注意：rem有兼容問題 gte IE8
清除浮動

做用： float後父級元素高度塌陷（沒了高度爲0），設置這個清楚浮動，高度能夠回來（即撐起來高度）

只要是觸發了BFC後，均可以清除浮動。

觸發BFC能夠動過一下幾個屬性：
- float:
- overflow:auto;
- overflow:hidden;
- display:table-cell ;
- display: table-...
- position : fixed;
- postion: absolute;

經典清除使用僞代碼方式：

.clearFix:before,

  .clearFix:after{	

  	       content:'  ’;

          clear:both;

          display:block;

          height:0;

          overflow:hidden

        

  }

  clearFix{
      zoom:1;
  }

也能夠簡寫成以下：

.clearFix:before,

  .clearFix:after{	

     	content:'  ’;

       display:table;

  }



.clearFix:after{

     clear:both;

}

  clearFix{
      zoom:1;
  }

flex 替代 float

display:flex 替代 float
2018 front-end趨勢

https://frontendmasters.com/books/front-end-handbook/2018/

兼容的前綴自動添加

http://autoprefixer.github.io/
精靈圖 sprit，設置小圖背景

好處是請求一次就拿到一張圖而後再根據background-position進行定位設置寬度|高度
- background-image
- background-position
- widht | height
- background-size
li 浮動後的幾個li間距問題修正
- 父元素font-size:0
- margin-left：-3px

行級標籤寬度設置

display:inner-block;

width:10%;

color:red;

font-size:1rem;

line-height:1.5;

padding:0.5rem;

text-aling:center;

text文本超出截斷

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

計算函數calc

width: calc(33.33333% - 1rem);
.item + .item 兄弟元素
```
.feature .item + .item {
     margin-left: 1.5rem;
 }
```
+ 好比 li 中是否包含.item的兄弟元素

這種方式通常都是設置除第一個外的其餘兄弟元素

濾鏡 filter

對背景顏色進行濾鏡

background: url('../img/logo@1x.png') no-repeat left;
-webkit-filter: grayscale(100%);

filter: grayscale(100%);

rgba 透明度

background: rgba(0,0,0,0.6)

對背景顏色進行opacity透明度控制不對字體影響

若字體也有透明度要用color:#000;opactiy: 0.6

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。