這部分內(nèi)容是最近重新復(fù)習(xí)移動(dòng)端,做頁(yè)面時(shí)的筆記,這是發(fā)布的第一篇關(guān)于rem布局實(shí)現(xiàn)。內(nèi)容大致分為頁(yè)面實(shí)現(xiàn)過(guò)程中的重新復(fù)習(xí)到的不確信內(nèi)容和未掌握內(nèi)容，和在頁(yè)面實(shí)現(xiàn)中出現(xiàn)的問(wèn)題和解決。

技術(shù)選型

方案:采用單頁(yè)面設(shè)計(jì)

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、雅安服務(wù)器托管、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、通海網(wǎng)站維護(hù)、網(wǎng)站推廣。

技術(shù):rem,媒體查詢(xún),less

設(shè)計(jì)圖:750px

內(nèi)容整理：

*創(chuàng)建common.less是為了供所有頁(yè)面使用其中樣式

*在less文件中引入less文件的方法是 在index.less中引入common.less @import 'common'

*@import&link

@import是由css提供，只有在ie5以上才能被識(shí)別，引用的css會(huì)在頁(yè)面加載完后才會(huì)加載引用的css；可以將一個(gè)樣式文件導(dǎo)入另一個(gè)樣式文件里 @import '文件名'

link屬于html標(biāo)簽，頁(yè)面加載的時(shí)候會(huì)被同時(shí)加載，不存在瀏覽器兼容問(wèn)題，引入樣式的權(quán)重大于@import，link是把一個(gè)樣式文件引入帶html頁(yè)面里去

flex

Flex是Flexible Box的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

display:flex;不會(huì)讓容器本身取消它的塊裝的屬性，但它的子元素會(huì)變成行內(nèi)塊的的屬性

它之所以被稱(chēng)為 Flexbox ，是因?yàn)樗軌驍U(kuò)展和收縮 flex 容器內(nèi)的元素，以最大限度地填充可用空間 。與以前布局方式（如 table 布局和浮動(dòng)元素內(nèi)嵌塊元素）相比，F(xiàn)lexbox 是一個(gè)更強(qiáng)大的方式：

• 在不同方向排列元素
• 重新排列元素的顯示順序
• 更改元素的對(duì)齊方式
• 動(dòng)態(tài)地將元素裝入容器

input type類(lèi)型

text,password,密碼框,radio單選框,checkbox復(fù)選框,

button按鈕,file上傳文件,image提交式圖片,submit/reset提交/重置按鈕

outline:點(diǎn)擊input時(shí)會(huì)出現(xiàn)一圈的藍(lán)色邊框

outline:none;去除就不顯示了

因?yàn)閎ox-sizing盒子默認(rèn)為content-box

在input中想要使用padding調(diào)整文字顯示的位置時(shí)使用padding會(huì)變大盒子,影響后面的布局,所以只有把box-sizing:border-box;寫(xiě)上去就可以解決這個(gè)問(wèn)題

判斷一部分需不需要設(shè)置寬高來(lái)適應(yīng)頁(yè)面變化

你直接在沒(méi)有任何設(shè)置的情況下調(diào)整頁(yè)面窗口大小,發(fā)現(xiàn)內(nèi)容偏離或者顯示不全,那就是需要設(shè)置固定寬高才能適應(yīng)頁(yè)面變化,采用rem控制.

父級(jí)邊框塌陷的原因

父級(jí)是沒(méi)有樣式的div/ul等塊級(jí)元素;父級(jí)盒子內(nèi)部只有浮動(dòng)元素,父級(jí)沒(méi)有設(shè)置高度和寬度

父級(jí)盒子中子元素水平排列方法

.ad{

flex方法針對(duì)父盒子是一個(gè)行內(nèi)元素,flex方法可以使其中的子元素變成行內(nèi)塊(觸發(fā)BFC這是a沒(méi)有塌陷被img子元素?fù)纹饋?lái)的原因)

display:flex;

a img{

flex:1;

width:100%;

針對(duì)這種情況使用以下代碼也可以實(shí)現(xiàn)水平排列,但是a這個(gè)父元素塌陷,即點(diǎn)擊時(shí)沒(méi)有跳轉(zhuǎn)效果,

需要再解決父盒子塌陷的問(wèn)題,解決方法是給a元素的樣式中添加display:block;再添加寬度高度.

*// float: left;*

// width: 33.3%;

}

}

行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素的方法

1.直接使用display:block;使元素的屬性改變

2.float；浮動(dòng)之后檢查computed里面的元素的display也會(huì)發(fā)生改變，變?yōu)閎lock

3.使用定位：position：fixed（固定定位）/absolute（絕對(duì)定位）

4.使用彈性盒，讓父元素變成彈性盒

rem布局適配方案:

1.less+媒體查詢(xún)+rem

2.flexible.js

問(wèn)題集合：

1.less使用除法的時(shí)候不生效的時(shí)候，使用括號(hào)可以生效

2.為什么有寬度有高度有背景顏色但是沒(méi)有顯示是?

被后面覆蓋了?因?yàn)樾袃?nèi)元素里面沒(méi)有寫(xiě)內(nèi)容

因?yàn)樵厥切袃?nèi)元素,不能設(shè)置寬高,只有里面有內(nèi)容的時(shí)候才能顯示出背景顏色

4.設(shè)置background:url();屬性插入了背景圖片,這個(gè)元素也設(shè)置了大小,但是窗口變化得很小的時(shí)候背景圖片就看不到了,圖片不能跟著頁(yè)面一起變化?

因?yàn)樵卦O(shè)置了rem為單位的寬和高,所以它的大小是會(huì)隨設(shè)置的媒體查詢(xún)結(jié)果改變,但是背景圖的大小是由bacjground-size設(shè)置的,因?yàn)闆](méi)有設(shè)置這個(gè),所以沒(méi)能實(shí)現(xiàn)一同變化

分享名稱(chēng)：rem布局實(shí)現(xiàn)靜態(tài)頁(yè)面之適配方案1
URL標(biāo)題：http://weahome.cn/article/dsojchs.html