一、開發(fā)前的準(zhǔn)備

       在開發(fā)企業(yè)網(wǎng)站的過程中，不僅僅是布局、樣式、功能的編寫，更多需要考慮到的是網(wǎng)站建設(shè)中兼容性的處理，首先，在接到項目的那一刻，很多人就立馬開始排版布局、寫樣式、渲染數(shù)據(jù)。后面遇到問題了在想辦法解決，其實(shí)不然，開發(fā)前應(yīng)該前后端先交流、哪些功能可以實(shí)現(xiàn)、哪些功能由于種種限制實(shí)現(xiàn)不了，這會在開發(fā)后省了很多要解決的問題，同時也會縮減很多的時間，所以溝通很重要，前期的溝通能為開發(fā)節(jié)省很多時間，用一天的時間交流文案中的各種需求，那么開發(fā)中至少節(jié)省你三天的時間，甚至更多。所以開發(fā)前的重點(diǎn)，了解好需求、限制。

二、開發(fā)中的問題

       在網(wǎng)站建設(shè)的過程中，不同的人多頁面的布局不一樣，但最終的效果是一樣的，但是，哪個更好一些呢？比如：讓三個div水平居中，那么有很多方法，flex布局，添加絕對定位absolute，然后在用top和left和transform中 translate進(jìn)行位置的調(diào)整，或者用margin、padding的方式計算出居中的位置進(jìn)行賦值，但那種更好點(diǎn)呢，個人認(rèn)為flex布局好用一點(diǎn)，transform這個屬性涉及到了兼容性問題，有些瀏覽器不兼容，所以容易導(dǎo)致樣式混亂。

要注意的問題：

1、在樣式開頭前，首先應(yīng)該讓margin和padding為0，因?yàn)橛行g覽器自帶了一些邊距。

2、用了padding，一般不可少用到box-sizing:border-box;用了float，一般在父盒子中添加overflow:hidden清除浮動。

3、現(xiàn)在的網(wǎng)站都是響應(yīng)式開發(fā)，所以px單位盡量少用，用一下相對單位，如rem。

4、rem單位在使用時對font-size的調(diào)整最好不小于12px，因?yàn)槟承g覽器會有默認(rèn)值，如果小于默認(rèn)值，按默認(rèn)值處理，默認(rèn)值一般為12px，所以你對rem調(diào)整后在頁面中的html的font-size應(yīng)該要不小于12px。

5、rem在使用時在網(wǎng)上找一段代碼，用你屏幕的寬度/(設(shè)計稿的寬度/12)，將得到的值賦給font-size，這樣1rem=設(shè)計稿的12px，然后在進(jìn)行排版布局就會避免了rem的坑

6、手機(jī)端的網(wǎng)頁和pc端的網(wǎng)頁是不一樣的，那怕頁面和內(nèi)容都是一模一樣，但是還是要對font-size進(jìn)行再一次的調(diào)整，做完pc端的網(wǎng)站后以為網(wǎng)站是響應(yīng)式的，換個屏幕大小也會縮放的，不用寫手機(jī)端的，其實(shí)不然，如果是用rem為單位進(jìn)行響應(yīng)式開發(fā)，那么在pc端和手機(jī)端排版相差不大的情況下，還是要對font-siize進(jìn)行調(diào)整，不小于12px，然后要么對針對手機(jī)端寫一套html和css與js，但在功能和排版相差不大的情況下，用媒體查詢，寫一套手機(jī)端的樣式，這樣才能做到手機(jī)端和pc端都能瀏覽的效果。

三、開發(fā)后的調(diào)試

      兼容性一直是前端開發(fā)的一個重要的問題，各種瀏覽器的兼容性，處理方法必須了解。