## 網頁布局方式
以下幾種布局方式挺不是獨立存在的,實際開發過程中往往是互相結合使用的.
1. 固定寬度布局 : 為網頁設置一個固定的寬度,通常以PX做長度單位,常見于PC端網頁.
2. 流式布局 : 為網頁設置一個相對的寬度,通常以百分比做長度單位.
3. 柵格化布局 : 將網頁寬度人為劃分成均等的長度,然后排版布局時則以這些均等的長度作為度量 單位,通常利用百分比做為長度單位來劃分成均等的長度.
4. 響應式布局 : 通過檢測設備信息,決定網頁 布局方式,即用哪個胡如果采用不同的設備訪問同一個網頁,有可能會看到不一樣 內容,一般情況下是檢測屏幕的寬度來實現.
## 響應式布局
responsive design ,意在實現冉屏幕分辨率的終端上瀏覽網頁的不同展示方式.通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗. 響應式主要借助媒體查詢來實現.
## 什么是響應式開發
1. 在移動端日益成熟的時候,桌面瀏覽器上開發的網頁已經不能滿足移動端的設備的展示和閱讀.
2. 之前,通常的做法是對移動端單獨開發一套特定的版本.
3. 但是如果移動端設備起來越多的時候,開發成本太大,是因為需要做所有屏幕的適配.
4. 響應式開發的目的就是:一個網站能兼容多種終端.
5. 在新建的網站上一般都會使用響應式開發.
6. 移動web開發和響應式開發是必須具備的技能.
- HTML
- 瀏覽器內核
- Web標準
- HTML標簽關系
- 路徑
- 表單
- datalist
- fieldset
- H5新增input
- 列表
- 表格
- 網站優化三大標簽
- CSS
- 規則
- 命名規則
- 偽類選擇器
- 塊級元素和行內元素區別
- 權重
- 盒子模型
- 浮動
- 清除浮動
- 版心和布局流程
- 定位
- 元素的顯示和隱藏
- overflow溢出
- CSS用戶界面樣式
- 垂直對齊
- 取出圖片地測空白縫隙
- 溢出的文字隱藏
- 精靈技術
- 字體圖標
- 滑動門
- before和after偽元素
- 2D
- 過度效果
- translate
- scale
- rotate
- skew
- 3D
- 左手法則
- rotateX,Y,Z旋轉
- perspective
- translateZ
- translate3d
- backface-visibility
- 動畫(animation)
- 概述
- 伸縮布局
- BFC
- 優雅降級和漸進增強
- 背景漸變
- CSS統一驗證工具
- CSS壓縮工具
- 移動web基礎知識
- 基礎
- 像素密度
- 設備獨立像素
- css像素
- 2倍圖
- 調試
- 視口的概念及設置
- PC端的視口
- 移動端的視口
- 移動端頁面正常展示的解決方案
- 移動端viewport設置
- 移動站點和瀏覽器的說明
- 響應式開發
- 基礎
- 媒體查詢
- 媒體查詢條件判斷
- 媒體功能
- 使用媒體查詢設置頁面布局
- bootstrap