Float是我們?cè)谠O(shè)計(jì)網(wǎng)站前端的時(shí)候，很常用到的一個(gè)CSS屬性。我們常用它來(lái)讓DIV等標(biāo)簽貼向左邊或者右邊。關(guān)于Float的用法，大家可以去看看w3school的介紹：w3school：CSS float 屬性其實(shí)Float共有4個(gè)用法，我們常用的方法是設(shè)置是下面這兩種：float:left;float:right;我們?cè)谠O(shè)置不同分辨率CSS樣式的時(shí)候，可以用float的right來(lái)替換left以達(dá)到某些設(shè)計(jì)上的要求，但是我們的要求是多變的。先森在適配網(wǎng)站自適應(yīng)的時(shí)候，就遇到了設(shè)置了左右浮動(dòng)的標(biāo)簽，在更小分辨率想要將其設(shè)置為居中的狀態(tài)的時(shí)候設(shè)置不成功的情況，這時(shí)先森就想讓它的浮動(dòng)效果清除掉。清除左右浮動(dòng)其實(shí)也很簡(jiǎn)單，上文說(shuō)了Float共有4個(gè)用法，除了常用的左右浮動(dòng)，還有兩個(gè)用法分別是"none"和"inherit"。從字面意思上就可以看出它們的用法，分別是“沒(méi)有”和“繼承”。在我們想要將其浮動(dòng)清除的時(shí)候，只需要設(shè)置以下屬性即可：float:none;關(guān)于Float的浮動(dòng)，清除起來(lái)還是比較容易。但是關(guān)于定位的屬性position的定位，如何清除它的影響先森還是沒(méi)能琢磨的透。網(wǎng)上提出的有兩種解決方法，一個(gè)是overflow，另一個(gè)是clear:both，只能看哪個(gè)有用設(shè)置哪個(gè)了。網(wǎng)站自適應(yīng)之清除標(biāo)簽的float浮動(dòng)

先森用了幾天的VeryCloud、騰訊云兩個(gè)云服務(wù)商的CDN，時(shí)間雖短，卻問(wèn)題不斷。為了不讓自己忘記這些來(lái)之不易的經(jīng)驗(yàn)，先森覺(jué)得把它們寫(xiě)出來(lái)，記下來(lái)。當(dāng)然能幫上人就更好了。除了本篇文章，先森之前還寫(xiě)了一篇總結(jié)，有興趣的也可以去看看：第一篇：VeryCloud、騰訊云CDN使用技巧總結(jié)之查看命中緩存情況下面，先森來(lái)做新一輪的總結(jié)。1.搜索引擎線路解析什么是搜索引擎線路？即專為搜索引擎單獨(dú)設(shè)置的DNS解析線路。為什么要設(shè)置搜索引擎線路？先森主要是在張戈博客接收到了這么一個(gè)理念，搜索引擎蜘蛛也許有一個(gè)DNS的解析緩存，對(duì)你網(wǎng)站解析的IP會(huì)保存一段時(shí)間，這個(gè)時(shí)間大概一兩天。而我們使用的CDN是讓訪客訪問(wèn)就近的服務(wù)器節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)都有單獨(dú)的IP，而且這個(gè)IP還不是長(zhǎng)時(shí)間保留的。這就相當(dāng)于我們的網(wǎng)站經(jīng)常更換服務(wù)器，這樣我們自己都會(huì)感覺(jué)不好吧，何況是蜘蛛？同時(shí)，我們的網(wǎng)站設(shè)置CDN后，搜索引擎蜘蛛訪問(wèn)的也是節(jié)點(diǎn)IP，而一旦蜘蛛對(duì)這個(gè)IP進(jìn)行緩存，緩存時(shí)間大于CDN的IP存在時(shí)間的時(shí)候，蜘蛛就訪問(wèn)不了這個(gè)IP了。那么蜘蛛就會(huì)判定我們的網(wǎng)站存在問(wèn)題，最終導(dǎo)致SEO受到傷害。大概就是這么一個(gè)觀點(diǎn)，詳細(xì)的內(nèi)容還請(qǐng)大家去看看張戈博客的原文：淺析網(wǎng)站更換ip或使用CDN會(huì)不會(huì)影響SEO排名而解決或者說(shuō)不產(chǎn)生上面的問(wèn)題的方法，就是設(shè)置搜索引擎線路。雖然張戈已經(jīng)說(shuō)得很清楚了，如何設(shè)置搜索引擎線路，但還是有很多站長(zhǎng)在問(wèn)設(shè)置問(wèn)題。包括先森自己，也是研究了一下，才想明白該如何設(shè)置。首先，奉勸和我之前一樣，一直使用萬(wàn)網(wǎng)域名解析的，趕緊換換吧。下面再次簡(jiǎn)單講講先森的經(jīng)歷。萬(wàn)網(wǎng)解析只支持百度、谷歌、必應(yīng)三家的搜索引擎線路，重點(diǎn)是解析的還不準(zhǔn)確。不，是非常不準(zhǔn)確。先森用百度抓取診斷，該抓取CDN節(jié)點(diǎn)IP的還是抓取，設(shè)置和沒(méi)設(shè)置完全沒(méi)有什么兩樣。萬(wàn)網(wǎng)設(shè)置搜索引擎線路后的百度抓取診斷百度抓取的IP實(shí)為騰訊云的CDN節(jié)點(diǎn)IP問(wèn)張戈博客的張哥，張哥給我兩個(gè)解決辦法，一是換DNSPod解析，二是使用百度云加速，因?yàn)樵萍铀儆凶詣?dòng)的搜索引擎回源。先森因?yàn)椴砰_(kāi)始使用VeryCloud不久，還想再研究研究，就選擇了使用DNSPod的方法。關(guān)于如何將域名解析從萬(wàn)網(wǎng)轉(zhuǎn)移到DNSPod，先森也分享過(guò)方法，因?yàn)镈NSPod的方法有點(diǎn)老舊了：將萬(wàn)網(wǎng)/阿里云域名DNS地址修改到DNSPod如何設(shè)置搜索引擎線路？首先新增一個(gè)解析記錄，然后開(kāi)始設(shè)置。主機(jī)記錄：根據(jù)需求，如果直接解析域名，填“@”；域名、二級(jí)域名都要解析，填“*”；只解析一個(gè)二級(jí)域名，填二級(jí)域名的值，如“www”。先森就只解析www的。記錄類型：選擇A記錄。線路類型：DNSPod支持百度、谷歌、必應(yīng)、搜搜、搜狗、奇虎，和相當(dāng)于默認(rèn)搜索引擎線路的“搜索引擎”。先森是每個(gè)搜索引擎線路都單獨(dú)設(shè)置了一條A記錄。記錄值：這里就設(shè)置自己源站服務(wù)器IP，即真實(shí)IP，要小心，不要泄露。其他各項(xiàng)就根據(jù)自己的需求設(shè)置了。下面貼出先森的設(shè)置情況：DNSPod搜索引擎線路設(shè)置設(shè)置之后，先森立馬到百度站長(zhǎng)工具去抓取診斷，秒秒鐘虐了萬(wàn)網(wǎng)：抓取IP為源站IP2.詳讀“常見(jiàn)問(wèn)題”這一點(diǎn)，就是讓大家去仔仔細(xì)細(xì)的將VeryCloud、騰訊云的“常見(jiàn)問(wèn)題”看完，這樣能使我們少走很多彎路。這也是先森在問(wèn)了售后很多問(wèn)題之后發(fā)現(xiàn)的，有很多問(wèn)題，都已經(jīng)寫(xiě)入“常見(jiàn)問(wèn)題”中了，相信售后的心是崩潰的。其實(shí)說(shuō)到底，就是多讀、多看、多想。兩個(gè)CDN服務(wù)商都有常見(jiàn)問(wèn)題頁(yè)面，但是先森覺(jué)得VeryCloud的常見(jiàn)問(wèn)題比較偏原理解釋，重點(diǎn)介紹了什么是CDN、CDN如何工作、CDN的優(yōu)勢(shì)、什么是緩存命中率等等：VeryCloud常見(jiàn)問(wèn)題其實(shí)VeryCloud的話，大家更應(yīng)該點(diǎn)擊上圖紅框中的云分發(fā)，看更多更有針對(duì)性的解決問(wèn)題方法。單頁(yè)不能忽視這一頁(yè)15個(gè)常見(jiàn)問(wèn)題的作用，這些基礎(chǔ)知識(shí)能讓我們對(duì)CDN更加了解。更多詳情就希望大家自己查看了：VeryCloud云分發(fā)-使用幫助VeryCloud常見(jiàn)問(wèn)題而騰訊云的常見(jiàn)問(wèn)題頁(yè)面，則做的更加細(xì)致，問(wèn)題更加全面，也有著很好的針對(duì)性。騰訊云對(duì)自家服務(wù)進(jìn)行了介紹，其中有優(yōu)勢(shì)，有原理，有功能。從基礎(chǔ)介紹，接入相關(guān)，日常使用，問(wèn)題排查四個(gè)方面回答問(wèn)題，顯得簡(jiǎn)單明了。其中就有如何判斷用戶訪問(wèn)是否命中CDN cache、接入cdn之后網(wǎng)站打不開(kāi)，如何排查、命中率低是什么原因呢等經(jīng)典問(wèn)題，這些問(wèn)題有很多都是現(xiàn)在自己搞了很久才弄明白的，沒(méi)想到這里就很清楚的寫(xiě)著：騰訊云常見(jiàn)問(wèn)題在這里，先森也把騰訊云的相關(guān)鏈接貼出來(lái)，騰訊云還有一個(gè)內(nèi)容分發(fā)網(wǎng)絡(luò)的幫助文檔，文檔中包含以上內(nèi)容，查看卻沒(méi)有以上內(nèi)容方便，但先森還是一并貼出來(lái)：騰訊云CDN常見(jiàn)問(wèn)題騰訊云內(nèi)容分發(fā)網(wǎng)絡(luò)常見(jiàn)問(wèn)題騰訊云內(nèi)容分發(fā)網(wǎng)絡(luò)CDN論壇騰訊云還介紹了一個(gè)可以管理查看CDN中緩存文件軟件SVN的使用方法，但是騰訊云卻沒(méi)有使用SVN源了，讓我們使用他們的對(duì)象儲(chǔ)存業(yè)務(wù)COS。3.查看日志不管是VeryCloud還是騰訊云，都支持查看日志。但是他們的日志下載之后，打開(kāi)顯得非常凌亂，雖然很詳細(xì)，但遠(yuǎn)不如直接在網(wǎng)站上查看統(tǒng)計(jì)分析來(lái)的簡(jiǎn)單明了。主要還是，關(guān)于CDN日志，他們都沒(méi)有提供什么統(tǒng)計(jì)分析軟件。不過(guò)先森覺(jué)得，查看日志主要也是排查問(wèn)題的，很具有針對(duì)性。簡(jiǎn)單的來(lái)說(shuō)，騰訊云統(tǒng)計(jì)里可以看到訪問(wèn)返回碼，我們可以看到產(chǎn)生了多少次的404，但是看不到是哪些頁(yè)面出現(xiàn)了404，這時(shí)候就需要查看日志了。先森問(wèn)了騰訊云的售后，售后推薦使用notepad++，sublime兩款軟件。日志的內(nèi)容顯得很亂，但都是每行一條，每條里面有很多數(shù)據(jù)，這些數(shù)據(jù)是按照順序來(lái)的。VeryCloud日志：例：12.243.121.90 - - [24/Mar/2015:12:42:18 +0800] "GET http://www.verycloud.cn/usr/uploads/201503/20150302100356_29670.flv  HTTP/1.1" 200 1933334 "http://portal.verycloud.cn/galileo/20150306/8ad1637dbf7cd191f1fe728fc18658d9.swf" "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36" TCP_MEM_HIT 0.947 58.22.102.229字段參數(shù)客戶端真實(shí)ip12.243.121.90請(qǐng)求時(shí)間24/Mar/2015:12:42:18方法GETURLhttp://www.verycloud.cn/usr/uploads/201503/20150302100356_29670.flvhttpversionHTTP/1.1狀態(tài)碼200請(qǐng)求字節(jié)1933334Refererhttp://portal.verycloud.cn/galileo/20150306/8ad1637dbf7cd191f1fe728fc18658d9.swfUAMozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36結(jié)果TCP_MEM_HIT處理請(qǐng)求時(shí)間0.947節(jié)點(diǎn)IP58.22.102.229騰訊云日志：拿先森自己網(wǎng)站的日志中的一行作為例子：20160407104007 180.97.171.210 www.cnidcc.cn /qzcdnhcjszjrtxy.html 12276 120 2 200 NULL 1 "Mozilla/5.0 (Windows NT 10.0; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0"字段參數(shù)請(qǐng)求時(shí)間20160407104007訪問(wèn)域名的客戶端IP180.97.171.210被訪問(wèn)域名www.cnidcc.cn文件請(qǐng)求路徑/qzcdnhcjszjrtxy.html本次訪問(wèn)字節(jié)數(shù)大小12276省份120運(yùn)營(yíng)商2http返回碼200referer信息NULLrequest-time(毫秒)1User-Agent"Mozilla/5.0 (Windows NT 10.0; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0"關(guān)于省份和運(yùn)營(yíng)商代碼所代表的含義，還需要我們?nèi)ゲ榭打v訊云的映射表查看地域及運(yùn)營(yíng)商編碼映射表注：Referer信息，保存的是訪問(wèn)該網(wǎng)頁(yè)是從哪個(gè)頁(yè)面鏈接過(guò)來(lái)的，我們統(tǒng)計(jì)搜索引擎跳轉(zhuǎn)，就是用的這個(gè)信息。4.文件刷新使用CDN有一個(gè)很大的問(wèn)題，就是動(dòng)態(tài)數(shù)據(jù)的顯示問(wèn)題。最容易涉及到的，就是文章的訪問(wèn)量，以及最新評(píng)論的問(wèn)題。關(guān)于訪問(wèn)量，無(wú)傷大雅，只要設(shè)置緩存策略的時(shí)候緩存時(shí)間設(shè)短一些就還好。至于文章的最新評(píng)論，就有點(diǎn)不好了。別人在你的網(wǎng)站上留了言，明明通過(guò)審核了，卻還是顯示之前的頁(yè)面，最新的評(píng)論就沒(méi)有顯示出來(lái)。這時(shí)候我們?cè)偃ナ謩?dòng)的刷新緩存的話，就會(huì)比較麻煩。所以，我們就需要用到刷新緩存的API了。我們使用API，實(shí)現(xiàn)當(dāng)頁(yè)面增加了評(píng)論的時(shí)候，刷新該頁(yè)面。具體的使用方法是將一些代碼放入WordPress主題functions.php文件中即可，代碼是張戈博客提供的，需要的小伙伴可以去看看：VeryCloud：WordPress發(fā)布/更新文章、提交/審核評(píng)論自動(dòng)清理VeryCloud緩存騰訊云：WordPress發(fā)布/更新文章、提交/審核評(píng)論自動(dòng)清理騰訊云CDN緩存另外，VeryCloud的API，是不對(duì)外開(kāi)放的，向售后工程師申請(qǐng)的時(shí)候，也要保證自己網(wǎng)站帶寬夠大，才能申請(qǐng)成功。售后工程師給先森的回復(fù)是要達(dá)到20M的帶寬，這對(duì)張戈博客當(dāng)然不成問(wèn)題，但是對(duì)我們這些小站來(lái)說(shuō)，差的太遠(yuǎn)。雖然有小伙伴在先森交《全站CDN緩存加速之接入VeryCloud》一文中回復(fù)說(shuō)，VeryCloud開(kāi)放了API接口，但先森查看之后發(fā)現(xiàn)，實(shí)際還是需要讓你想客服索要API。總結(jié)回顧一下，本文主要介紹了如何設(shè)置搜索引擎解析線路，通過(guò)詳讀“常見(jiàn)問(wèn)題”來(lái)少走彎路，如何查看VeryCloud的日志，日志內(nèi)容的參數(shù)含義，以及如何用API接口來(lái)實(shí)現(xiàn)刷新緩存。現(xiàn)在就總結(jié)這些，如果以后還有什么好的經(jīng)驗(yàn)，先森還會(huì)默默的更新的。

先森用了幾天的VeryCloud、騰訊云兩個(gè)云服務(wù)商的CDN，時(shí)間雖短，卻問(wèn)題不斷。發(fā)現(xiàn)問(wèn)題→解決問(wèn)題是使人進(jìn)步的途徑。這來(lái)來(lái)回回的問(wèn)題，雖然讓先森愁白了頭，也讓先森get到了很多技能。此文的作用，是為了不讓自己忘記這些來(lái)之不易的經(jīng)驗(yàn)，如果能幫到人，那就更好了。1.騰訊云關(guān)于騰訊云的命中緩存，先森一開(kāi)始用騰訊云CDN就發(fā)起工單問(wèn)了售后。估計(jì)先森遇到了一個(gè)騰訊云的雛，直接回復(fù)先森的沒(méi)有通過(guò)響應(yīng)頭查看命中緩存的方式。先森也是醉了，他讓先森看前后對(duì)比，后面讓先森檢驗(yàn)MD5：騰訊云雛鳥(niǎo)后來(lái)先森通過(guò)實(shí)際使用，終于發(fā)現(xiàn)了正確的使用方法，并且又發(fā)起工單證實(shí)了。以下是一位騰訊云老鳥(niǎo)的回復(fù)：“您好：如何判斷用戶訪問(wèn)是否命中CDN cache查看訪問(wèn)回包頭部的X-Cache-Lookup信息X-Cache-Lookup:Hit From MemCache 表示命中CDN節(jié)點(diǎn)的內(nèi)存X-Cache-Lookup:Hit From Disktank 表示命中CDN節(jié)點(diǎn)的磁盤(pán)X-Cache-Lookup:Hit From Upstream 表示沒(méi)有命中CDN”簡(jiǎn)單明了爽快。先森用的聯(lián)通，只有電信線路解析的是騰訊云。通過(guò)360的奇云測(cè)，先森發(fā)現(xiàn)電信線路大部分都有命中緩存。騰訊云CDN命中緩存2.VeryCloudVeryCloud是否命中緩存的查看方法，其實(shí)先森已經(jīng)在網(wǎng)站接入VeryCloud一文中已經(jīng)介紹過(guò)了，但是這里為了做一個(gè)歸納，且先森發(fā)現(xiàn)了新的方法，所以再次貼出。首先，查看是否緩存命中的方法還是看響應(yīng)頭，有一項(xiàng)很顯眼的Powered-By-VeryCDN，HIT表示命中緩存，MISS表示回源，沒(méi)有命中緩存：VeryCloud命中緩存其實(shí)讓先森很不開(kāi)心的，就是用奇云測(cè)還能看到一些HIT命中緩存的情況，先森本地嘗試則重來(lái)沒(méi)有命中過(guò)緩存，為這事先森找了幾次客服。今天先森遇到了認(rèn)識(shí)的第四個(gè)VeryCloud售后工程師，他告訴先森，是因?yàn)槊看嗡⑿略L問(wèn)的CDN節(jié)點(diǎn)不同導(dǎo)致的。我們知道，CDN是在網(wǎng)頁(yè)第一次被訪問(wèn)的時(shí)候緩存，第二次訪問(wèn)的時(shí)候訪問(wèn)緩存。而每次訪問(wèn)的節(jié)點(diǎn)不同，就導(dǎo)致不停的在為不同的DN節(jié)點(diǎn)緩存，而沒(méi)有命中緩存。并且這位工程師教了先森一項(xiàng)更準(zhǔn)確的檢查方式。先森查看響應(yīng)頭用的是瀏覽器的方式，這位工程師教的則是Linux命令查詢了。幸好先森虛擬機(jī)里裝了Linux，雖然是圖形界面的，但是也能用。當(dāng)然，我們要讓Linux聯(lián)網(wǎng)，怎么聯(lián)網(wǎng)先森就不贅述了。使用的是wget命令，熟悉Linux的童鞋應(yīng)該會(huì)常用到。這里主要是介紹給和先森一樣沒(méi)怎么接觸過(guò)Linux的站長(zhǎng)，反正先森是感到很驚奇啦。進(jìn)入Linux，右鍵“在終端打開(kāi)”，進(jìn)入類似windows中cmd的界面。代碼有以下兩種：wget -SO /dev/null urlwget -SO /dev/null url -ehttp_proxy=ip其中，將url改成你想要測(cè)試的鏈接，ip改為你想要測(cè)試的CDN節(jié)點(diǎn)IP。下面是先森用Linux的測(cè)試情況：wget -SO /dev/null urlwget -SO /dev/null url -ehttp_proxy=ip總結(jié)這樣能滿足我們對(duì)緩存設(shè)置情況進(jìn)行檢查，但是要使每個(gè)CDN節(jié)點(diǎn)都能命中緩存，要不就內(nèi)容預(yù)取，要不就只有增加自己網(wǎng)站的訪問(wèn)量了。因?yàn)镃DN畢竟是訪客第一次訪問(wèn)的時(shí)候直接回源并開(kāi)始緩存，第二次訪問(wèn)的時(shí)候命中緩存。訪問(wèn)量要是多的話，當(dāng)然就更容易命中緩存了。

關(guān)于為何要接入CDN，而且是全站接入CDN，先森就不在贅述了，這些在寫(xiě)接入騰訊云的時(shí)候就已經(jīng)寫(xiě)過(guò)了。關(guān)于VeryCloud，先森其實(shí)以前也沒(méi)聽(tīng)說(shuō)過(guò)，但是為了緊跟張戈博客張哥的腳步，先森也跟著做了。關(guān)于先森接入騰訊云CDN的過(guò)程，希望大家也能看看：全站CDN緩存加速之接入騰訊云用了兩天的VeryCloud，先森對(duì)它是有愛(ài)有恨。愛(ài)的是VeryCloud的售后工程師真的很好。VeryCloud雖然也有系統(tǒng)，但先森第一次使用的是他們的企業(yè)QQ，所以后面就一直用的企業(yè)QQ和售后交流。先森先后遇到了3個(gè)售后工程師，可能他們的售后都被先森問(wèn)了個(gè)遍吧。三個(gè)售后都非常好，可能先森的問(wèn)題已經(jīng)要把他們逼瘋了，卻依舊能很好的應(yīng)對(duì)。先森有時(shí)還問(wèn)了一些不是他們VeryCloud的問(wèn)題，他們也會(huì)對(duì)先森做出指導(dǎo)。但是，無(wú)論先森怎么設(shè)置VeryCloud的CDN，總是沒(méi)能達(dá)到預(yù)想的成果。先森的靜態(tài)文件放在七牛的，所以不需要VeryCloud的CDN緩存。開(kāi)始沒(méi)有在意，先森想著VeryCloud和七牛兩個(gè)都把靜態(tài)文件緩存一邊挺好的。但后來(lái)一想，這樣會(huì)導(dǎo)致七牛鏡像會(huì)從CDN鏡像，而CDN鏡像會(huì)對(duì)文件進(jìn)行一些壓縮，尤其是圖片，這樣會(huì)導(dǎo)致最終展示的圖片清晰度減小，所以最后把靜態(tài)文件緩存關(guān)了。也不知道這樣的理解對(duì)不對(duì)，但是確實(shí)也導(dǎo)致了第一天七牛無(wú)法回源，顯示：{"error":"get from image source failed: E502"}，而頭部的返回解析狀態(tài)碼則顯示478。各種地方尋求幫助，把顯示逼瘋了，結(jié)果還是自己好了。然后七牛的工單有反應(yīng)了。。。而先森想要達(dá)到的效果，是網(wǎng)頁(yè)代碼，讓VeryCloud進(jìn)行緩存，而靜態(tài)文件，則讓七牛緩存。然而根據(jù)先森的理解，并沒(méi)有實(shí)現(xiàn)。好吧，廢話了這么多，回歸主題，先森再談?wù)刅eryCloud。VeryCloudVeryCloud非常給力，每個(gè)月都是50G的免費(fèi)CDN流量。而對(duì)于我們這種網(wǎng)站本身服務(wù)器流量每個(gè)月10G都用不完的來(lái)說(shuō)，簡(jiǎn)直多的不能再多了。反正先森用了3天，也沒(méi)用幾百兆流量。使用流量很慢怎么接入什么的，在其網(wǎng)站上幫助里面都寫(xiě)的很清楚了，先森也就不班門(mén)弄斧了。重點(diǎn)是緩存設(shè)置，先森是按照自己的想法設(shè)置的，而感覺(jué)實(shí)際生效情況卻沒(méi)有跟著先森的想法走。先森的想法是，后臺(tái)不緩存，前臺(tái)的今天資源不緩存，只緩存HTML界面以及WP Super Cache的緩存目錄。所以先森是這樣設(shè)置的：VeryCloud緩存設(shè)置若有網(wǎng)友知道怎么設(shè)置能夠?qū)崿F(xiàn)先森想法的配置，還請(qǐng)指明。先森問(wèn)了售后工程師，VeryCloud的緩存策略也是有優(yōu)先級(jí)的，這點(diǎn)在其設(shè)置中沒(méi)有明確指出。優(yōu)先級(jí)別是從上到下，越上面的越優(yōu)先。這兩天鼓搗CDN，讓先森新get到的技能，就是看網(wǎng)頁(yè)的頭信息，也就是按F12到network里面去看header中的信息。CDN緩存設(shè)置中的是否遵循源站，源站的規(guī)則，在這里就能夠看到。看頭部信息，CDN方面最重要的就是看緩存的命中情況。先森也是詢問(wèn)售后工程師之后，才知道了怎么查看VeryCloud的命中情況。VeryCloud命中情況查看VeryCloud命中情況，是通過(guò)查看頭部信息中響應(yīng)抱頭的'Powered-By-VeryCDN'項(xiàng)，如上圖紅框“Powered-By-VeryCDN:MISS from cuc-xg-1-1-c1761, MISS from utn-ho-1-1-c17a1”。先森還框住了兩個(gè)'MISS'。在這里，MISS代表著沒(méi)有命中緩存，回源。而如果命中緩存，則顯示HIT。可以看到，先森這里顯示的是MISS。而這里的兩個(gè)MISS，第一個(gè)MISS代表著從瀏覽器到CDN命中緩存失敗，第二個(gè)MISS顯示從CDN到源站服務(wù)器命中緩存失敗。先森無(wú)論刷新多少次，HTML的緩存命中都是MISS了的。但奇怪的是，VeryCloud中的統(tǒng)計(jì)情況又顯示HIT遠(yuǎn)遠(yuǎn)超過(guò)MISS：VeryCloud緩存命中統(tǒng)計(jì)VeryCloud管理功能讓先森用著有點(diǎn)沒(méi)頭腦，經(jīng)過(guò)售后工程師的解釋，先森才明白，那個(gè)列表不是顯示緩存到的文件目錄，而是刷新紀(jì)錄。先森還是沒(méi)把對(duì)象存儲(chǔ)和CDN加速區(qū)分開(kāi)，這是深受七牛影響。。。VeryCloud內(nèi)容刷新先森嘗試著刷新了一波，讓先森想起了一件有點(diǎn)郁悶的事情：VeryCloud內(nèi)容刷新-提交刷新這里的來(lái)源顯示的是來(lái)自API。張哥提醒過(guò)，VeryCloud的API沒(méi)有開(kāi)放，需要的時(shí)候要直接向客服索要，先森去要的時(shí)候卻遭遇了清明節(jié)——放假，著實(shí)有點(diǎn)郁悶。總結(jié)對(duì)于CDN，先森是沒(méi)有怎么搞明白的，每次感覺(jué)搞明白了，卻又會(huì)被現(xiàn)實(shí)潑了冷水。先森是打算轉(zhuǎn)戰(zhàn)百度云加速了，近期會(huì)做嘗試。寫(xiě)本文的期望就是希望能讓和先森一樣的小白能吃點(diǎn)經(jīng)驗(yàn)，少走一些彎路，雖然這些對(duì)大神們來(lái)說(shuō)是基礎(chǔ)，但先森希望能給未來(lái)的大神們奠定奠定基礎(chǔ)。另外，解析搜索引擎線路的時(shí)候，真的不能使用萬(wàn)網(wǎng)解析，萬(wàn)網(wǎng)解析的非常不準(zhǔn)確，先森將域名解析轉(zhuǎn)至了DNSPod，百度抓取診斷馬上就準(zhǔn)確了。而且DNSPod解析線路非常豐富，幾乎囊概了所有的搜索引擎，而且還有一條名為“搜索引擎”的線路。不知道怎么轉(zhuǎn)出萬(wàn)網(wǎng)？將萬(wàn)網(wǎng)/阿里云域名DNS地址修改到DNSPod

近期先森為全站設(shè)置了CDN，這樣雖然可以使全國(guó)各地的訪客打開(kāi)網(wǎng)站更快，同時(shí)也會(huì)導(dǎo)致百度等搜索引擎抓取網(wǎng)站的時(shí)候會(huì)抓取到CDN的IP地址。為了解決這個(gè)問(wèn)題，先森在萬(wàn)網(wǎng)域名解析設(shè)置了單獨(dú)的百度、谷歌、必應(yīng)的解析線路。然而先森在百度抓取診斷的時(shí)候，抓取到的卻都是CDN的IP。發(fā)工單到阿里云，和售后工程師扯了半天，最后竟然說(shuō)百度有問(wèn)題，讓先森去找百度。然后先森問(wèn)了張戈博客張哥，張哥很快回復(fù)先森說(shuō)萬(wàn)網(wǎng)的解析不準(zhǔn)確，讓先森用百度云加速或者用DNSPod解析。很明顯，先森選擇了后者。百度云加速過(guò)段時(shí)間再用。先森一直覺(jué)得，萬(wàn)網(wǎng)跟了阿里云后，功能很強(qiáng)大，但是設(shè)置卻有點(diǎn)繁瑣，這可能也是先森這方面的技術(shù)、意識(shí)還沒(méi)到位的原因。先森想將域名解析改到DNSPod，卻發(fā)現(xiàn)在萬(wàn)網(wǎng)迷了路。看了一下DNSPod的教程，發(fā)現(xiàn)教程好像有點(diǎn)老：DNSPod萬(wàn)網(wǎng)解析轉(zhuǎn)移教程就算是還能用，但是這里還需要多設(shè)置一個(gè)單域名控制臺(tái)授權(quán)，而這個(gè)設(shè)置，萬(wàn)網(wǎng)為了域名安全，默認(rèn)和建議我們是將其關(guān)閉的:單域名控制臺(tái)授權(quán)那么到底要怎么才能修改域名的DNS地址呢？先森也是找了一會(huì)才找到的，不在萬(wàn)網(wǎng)域名控制臺(tái)的域名解析里面，而是在基本管理里面：萬(wàn)網(wǎng)域名控制臺(tái)-基本管理當(dāng)然，先森這里是已經(jīng)修改好了的。如果是和先森一樣，是打開(kāi)了[域名安全鎖]的，還需要去關(guān)閉之后才能修改，可以修改之后再將其打開(kāi)。

成都航院計(jì)算機(jī)工程系教過(guò)先森網(wǎng)頁(yè)樣式代碼CSS，但是正如先森對(duì)大學(xué)的領(lǐng)悟“大學(xué)是一個(gè)真正讓你體會(huì)什么叫做‘師傅領(lǐng)進(jìn)門(mén) 修行靠個(gè)人’的地方”一樣，老師教的畢竟是基礎(chǔ)，不可能面面俱到。實(shí)踐出真理，先森漸漸也摸索出了一些對(duì)于網(wǎng)站上圖片的寬width和高h(yuǎn)eight的一些心得。先森的網(wǎng)站上用的是百度UEditor編輯器，先森一直覺(jué)得這個(gè)編輯器很好用，但是還是有些小毛病，需要我們自行改造插件。其中一個(gè)問(wèn)題，就是UEditor在上傳圖片的時(shí)候，會(huì)設(shè)置兩個(gè)圖片的寬高屬性：<img width="***" height="***" style=="width=***px;height=***px;" />這樣看著是沒(méi)有什么問(wèn)題的，但實(shí)際使用起來(lái)卻產(chǎn)生了在移動(dòng)端圖片無(wú)法自適應(yīng)的問(wèn)題：高度操持不變，寬度自適應(yīng)。這就導(dǎo)致了圖片拉伸。先森當(dāng)初也是到處尋求幫助，最終自己檢查出來(lái)的。圖片被拉伸當(dāng)然，這最終被先森解決了。關(guān)于更多百度UEditor編輯器的內(nèi)容，先森也為大家分享了：百度UEditor編輯器插件1.4.3.1 For WordPress解決使用百度UEditor編輯器后移動(dòng)端圖片被拉伸問(wèn)題解決百度UEditor編輯器上傳的圖片無(wú)法被七牛CDN自動(dòng)緩存問(wèn)題WordPress百度UEditor編輯器自動(dòng)添加七牛云儲(chǔ)存裁剪代碼好了，上面說(shuō)多了。其實(shí)本文中主要說(shuō)的不是后面的style中的寬高，而是前面的img標(biāo)簽中的寬高。這個(gè)寬高之前先森是沒(méi)有怎么注意的，認(rèn)為先森已經(jīng)在CSS中設(shè)置了圖片的寬高，這個(gè)寬高就沒(méi)必要設(shè)置了。相信很多站長(zhǎng)和先森的想法是一樣的。但是先森看了露兜的一篇文章之后改變了這個(gè)看法。童鞋們可以先去看看w3school中對(duì)img標(biāo)簽的說(shuō)明：HTML <img> 標(biāo)簽的 height 和 width 屬性w3school詳細(xì)介紹了img標(biāo)簽中width和height兩個(gè)屬性的重要性。先森看中的其實(shí)是露兜文章中一個(gè)評(píng)論的解釋。關(guān)于這篇文章，大家也可以去看看，露兜大大也對(duì)這條評(píng)論做了著重推薦：WordPress 自動(dòng)去除img的width和height屬性而先森看中的評(píng)論內(nèi)容則如下，是一個(gè)ID為“于江水”的哥們寫(xiě)的：“這樣做從前端的角度來(lái)說(shuō)是不合理的。img 的 alt 屬性是必須的，width 和 height 是推薦的。因?yàn)?img 在網(wǎng)頁(yè)的加載是要比 div 這些結(jié)構(gòu)慢的，所以往往是結(jié)構(gòu)和文字先加載了，再加載的圖片。這時(shí)候，由于瀏覽器預(yù)先不知道圖片的尺寸大小，所以無(wú)法渲染圖片在網(wǎng)頁(yè)中的位置和尺寸。等圖片加載進(jìn)來(lái)之后，再進(jìn)行渲染，這時(shí)候就產(chǎn)生重繪（就是瀏覽器重新計(jì)算相關(guān)元素的位置，具體表現(xiàn)就是圖片出現(xiàn)了，圖片下面的文字跑到下面了，淘寶的商品介紹頁(yè)面，這里非常明顯。）而帶有 width 和 height 的 img，瀏覽器會(huì)計(jì)算出來(lái)，留空，然后等待圖片加載，避免頁(yè)面重繪，提高前端性能和用戶體驗(yàn)，這里在知乎上多圖的答案可以看出來(lái)。那么回到露兜大大在乎的響應(yīng)式的圖片處理。這里應(yīng)該對(duì) img 設(shè)置 max-width: 100%; height: auto; 這兩條屬性，才可以保證成比例拉伸。”總結(jié)起來(lái)也就是設(shè)置了width和height兩個(gè)屬性后，瀏覽器會(huì)給沒(méi)加載出來(lái)的圖片留出應(yīng)有的位置。初看這個(gè)觀點(diǎn)的時(shí)候，先森雖然知道了，但也沒(méi)有重視。所以，也就在網(wǎng)站改版的時(shí)候沒(méi)給圖片加width和height兩個(gè)屬性。先森在改版后，又加入了CDN，在GTmetrix測(cè)試網(wǎng)站的時(shí)候，結(jié)果第一條優(yōu)化建議就是給圖片指定尺寸（點(diǎn)擊放大）：GTmetrix測(cè)評(píng)優(yōu)化而且先森這一點(diǎn)的得分是0分，是在有點(diǎn)郁悶，看來(lái)圖片width和height兩個(gè)屬性真的很重要。所以建議大家上該設(shè)置的還是設(shè)置上。至于設(shè)置的方法，可以參考上面給露兜大大留評(píng)論的那位仁兄的方法：max-width: 100%; height: auto;

先森的網(wǎng)站在安卓版UC瀏覽器上出了BUG，這次先森有點(diǎn)摸不著頭腦，因?yàn)橹挥邪沧堪娌糯嬖谶@個(gè)問(wèn)題，所以先森想要直接從電腦調(diào)試手機(jī)，就像電腦上F12審查元素調(diào)試網(wǎng)頁(yè)一樣。昨天發(fā)布了一篇Adobe Edge Inspect CC的折騰經(jīng)過(guò)，一把辛酸結(jié)果還沒(méi)成功。最后還是放棄了。先森在百度Adobe Edge Inspect CC教程的時(shí)候，也看到過(guò)另一種安卓調(diào)試方式，就是利用谷歌的Chrome瀏覽器遠(yuǎn)程調(diào)試(Remote Debugging)。其實(shí)另外還有一個(gè)叫做Weinre的，但是先森在其官網(wǎng)上找來(lái)找去，感覺(jué)和Remote Debugging是差不多的。然而Chrome瀏覽器的遠(yuǎn)程調(diào)試需要用數(shù)據(jù)線連接安卓手機(jī)，并且手機(jī)要開(kāi)啟開(kāi)發(fā)者模式。開(kāi)始開(kāi)發(fā)者模式簡(jiǎn)單，但是先森折騰了一下午，也沒(méi)能把三星、華為的手機(jī)驅(qū)動(dòng)裝好，電腦始終不能連接手機(jī)。后來(lái)用能夠連接手機(jī)的電腦嘗試了，結(jié)果谷歌Chrome瀏覽器遠(yuǎn)程調(diào)試界面還是沒(méi)有顯示出手機(jī)（Chrome瀏覽器地址欄輸入chrome://inspect 或者about:inspect）。沒(méi)辦法，放棄。到了晚上，先森在放棄之后突然想起，Chrome瀏覽器電腦上有個(gè)開(kāi)發(fā)者模式，UC瀏覽器有沒(méi)有呢？結(jié)果一百度，就找到了一個(gè)讓先森驚喜的搜索結(jié)果，也就是本文的標(biāo)題，UC瀏覽器開(kāi)發(fā)版。大家可以去看看，越看越驚喜哦！UC+開(kāi)放平臺(tái)：UC瀏覽器開(kāi)發(fā)者版先看最終的效果圖，先森將瀏覽器的調(diào)試界面和手機(jī)被調(diào)試的界面拼在了一起，這樣看起來(lái)效果更直觀（點(diǎn)擊后按F鍵看最大化/點(diǎn)擊倒數(shù)第二個(gè)按鈕）：UC瀏覽器調(diào)試界面配置調(diào)試模式其實(shí)關(guān)于如何配置，UC+開(kāi)放平臺(tái)已經(jīng)寫(xiě)得很清楚了，只是先森在設(shè)置的時(shí)候還是走了一截彎路，所以先森還是把自己的調(diào)試過(guò)程寫(xiě)出來(lái)。1.準(zhǔn)備工作手機(jī)端下載UC瀏覽器開(kāi)發(fā)者版，電腦端安裝chrome瀏覽器（先森嘗試了下UC瀏覽器電腦版，好像不行）。2.連接手機(jī)與PC有兩種連接方式。一種是WIFI連接，手機(jī)與電腦同一個(gè)網(wǎng)段下即可。另一種是USB連接，這又是像上面說(shuō)的一樣，需要手機(jī)進(jìn)入開(kāi)發(fā)者模式，電腦數(shù)據(jù)線連接手機(jī)，而且USB連接模式需要搭建AndroidSDK開(kāi)發(fā)環(huán)境或安裝adb工具。關(guān)于怎么USB連接，UC有詳細(xì)介紹，先森不在累述，而且先森使用的是WIFI連接。WiFi連接非常方便，先森推薦使用這種方法。3.開(kāi)始調(diào)試WIFI連接的話，直接在chrome中輸入：手機(jī)IP+:9998關(guān)于手機(jī)的IP查看，一般在設(shè)置->關(guān)于設(shè)備->狀態(tài)，可以找到。USB方式的先森就不多說(shuō)了。輸入訪問(wèn)后，手機(jī)上UC瀏覽器開(kāi)發(fā)者版會(huì)彈出對(duì)話框，先森用的是三星S3，情況如下圖：UC瀏覽器開(kāi)發(fā)者版彈出對(duì)話框這里點(diǎn)擊確定就行了。然后chrome瀏覽器會(huì)顯示出UC瀏覽器中打開(kāi)的網(wǎng)頁(yè)索引界面:chrome瀏覽器索引界面顯示這時(shí)，點(diǎn)擊任一需要調(diào)試的頁(yè)面即可進(jìn)行調(diào)試。調(diào)試的界面和審查元素的樣式一樣，操作起來(lái)感到非常熟悉：chrome調(diào)試頁(yè)面當(dāng)UC瀏覽器開(kāi)發(fā)者版的某個(gè)頁(yè)面被遠(yuǎn)端瀏覽器調(diào)試時(shí)，系統(tǒng)通知欄會(huì)顯示扳手圖標(biāo)，提示UC瀏覽器-調(diào)試模式開(kāi)啟，表明當(dāng)前手機(jī)頁(yè)面處于調(diào)試狀態(tài)。先森想說(shuō)，震動(dòng)模式的三星，進(jìn)入調(diào)試模式的震動(dòng)時(shí)間還真長(zhǎng)，長(zhǎng)！折騰總結(jié)這次折騰網(wǎng)頁(yè)手機(jī)調(diào)試，Adobe Edge Inspect CC浪費(fèi)了先森上午半天時(shí)間，USB手機(jī)連接電腦浪費(fèi)了先森下午時(shí)間，UC瀏覽器開(kāi)發(fā)者版先森沒(méi)看懂，去折騰安裝adb工具（實(shí)際上WIFI模式根本用不著）折騰了一晚上。浪費(fèi)了一整天，然而并沒(méi)有成效。結(jié)論就是折騰之中無(wú)時(shí)間。另外，實(shí)現(xiàn)WiFi調(diào)試是先森第二天早上花了一分鐘成功的。。。

先森完成手機(jī)自適應(yīng)的大框架之后，開(kāi)始處理各種BUG，其中UC瀏覽器安卓版中的BUG尤為突出。BUG表現(xiàn)為首頁(yè)輪播幻燈片圖片放大，互相遮蓋。而且，這個(gè)問(wèn)題僅僅出現(xiàn)在安卓手機(jī)中的UC瀏覽器里，表現(xiàn)情況如下圖：安卓UC瀏覽器BUG出現(xiàn)了這種問(wèn)題，讓先森感到很郁悶。不論是安卓自帶瀏覽器，還是iPhone各種瀏覽器，都不會(huì)出現(xiàn)這種問(wèn)題，只有安卓UC瀏覽器出問(wèn)題。既然出現(xiàn)了圖片互相遮蓋的問(wèn)題，肯定是CSS沒(méi)有寫(xiě)好。這時(shí)候先森想起逛知更鳥(niǎo)博客的時(shí)候，鳥(niǎo)叔的推薦15款響應(yīng)式Web設(shè)計(jì)測(cè)試工具文章中的Adobe Edge Inspect CC：Adobe Edge Inspect CC如果對(duì)鳥(niǎo)叔的這篇文章感興趣的可以去看看：知更鳥(niǎo)：推薦15款響應(yīng)式Web設(shè)計(jì)測(cè)試工具折騰過(guò)程Adobe Edge Inspect CC的推薦語(yǔ)寫(xiě)的很好：Adobe Edge可以讓你在設(shè)備上預(yù)覽和檢查響應(yīng)式網(wǎng)站。先森起初以為這只是個(gè)瀏覽器插件，想著很好用，剛好拿來(lái)調(diào)試UC瀏覽器上出現(xiàn)的問(wèn)題，就在谷歌插件里面搜索安裝了。然而，并沒(méi)有這么簡(jiǎn)單。當(dāng)然，要上谷歌，需要科學(xué)上網(wǎng)。還不會(huì)的童鞋可以看這里：科學(xué)上網(wǎng)：分享兩款免費(fèi)好用的帆墻軟件電腦和手機(jī)都安裝好這個(gè)插件之后，先森無(wú)論如何都無(wú)法照著網(wǎng)上教程一樣連接，chrome瀏覽器中Adobe Edge插件一直只顯示一句話：“Please start the Adobe Edge Inspect Application...Get Edge Inspect.”（請(qǐng)啟動(dòng)的Adobe邊緣檢查應(yīng)用程序...找邊檢查。）請(qǐng)啟動(dòng)的Adobe邊緣檢查應(yīng)用程序...找邊檢查而點(diǎn)擊鏈接，就只能到Adobe官網(wǎng)中介紹Adobe Edge Inspect CC的網(wǎng)頁(yè)。通過(guò)觀察網(wǎng)絡(luò)教程的截圖先森發(fā)現(xiàn)，先森Adobe Edge插件和別人教程里的不一樣，首先和chrome商店里插件下載的截圖中就不一樣。chrome商店中的Adobe Edge插件下載頁(yè)的Adobe Edge在瀏覽器中的圖標(biāo)是橙色的，而先森的則是灰色的，明顯的未啟動(dòng)的樣式。后來(lái)知道了，還有一個(gè)Adobe Edge Inspect CC的軟件，好吧，先森下載安裝。結(jié)果安裝好之后軟件界面都打不開(kāi)，直接跳個(gè)提示框："Your username and password are incorrect or your account does not have access to Edge Inspect CC"（您的用戶名和密碼不正確或您的帳戶沒(méi)有訪問(wèn)到邊緣檢查CC）。好吧，先森還沒(méi)有崩潰。接著百度谷歌之后了解到，需要安裝登錄一個(gè)CreativeCloudSet-Up.exe，Adobe的一個(gè)什么創(chuàng)意云套裝，專門(mén)下載、安裝和更新Adobe CC系列軟件的。登錄需要Adobe ID，沒(méi)有的話，還需要注冊(cè)。放心，注冊(cè)免費(fèi)，不會(huì)對(duì)你造成什么不良影響。好像注冊(cè)的時(shí)候需要科學(xué)上網(wǎng)。如果你看到上面就跑出去注冊(cè)ID了的話，再看這里先森會(huì)告訴你，還是沒(méi)有什么卵用。登錄之后，第一次打開(kāi)Adobe Edge Inspect CC的時(shí)候，OK，成功打開(kāi)，沒(méi)有跳提示框。打開(kāi)手機(jī)Adobe Edge Inspect CC插件，終于搜到電腦了。但是！但是打開(kāi)瀏覽器還是灰色狀態(tài)！也就是還是沒(méi)有啟動(dòng)。好吧，先森認(rèn)為重啟一次應(yīng)該可以湊效。重啟ING...登錄創(chuàng)意云，OK，沒(méi)問(wèn)題。打開(kāi)Adobe Edge Inspect CC軟件，出問(wèn)題了。提示框又出來(lái)了。這下先森沒(méi)轍了。折騰總結(jié)：1.浪費(fèi)了半天時(shí)間；2.安卓UC瀏覽器中的BUG并沒(méi)有修復(fù)；3.先森感到很不爽。折騰第一記·完

先森在完成網(wǎng)站自適應(yīng)的過(guò)程中，遇到了很多大大小小的問(wèn)題，其中一個(gè)問(wèn)題就是橫屏字體變大的問(wèn)題。這個(gè)問(wèn)題一碰到感覺(jué)很麻煩，其實(shí)解決方法卻很簡(jiǎn)單。網(wǎng)頁(yè)自適應(yīng)解決iPhone手機(jī)橫屏字體變大問(wèn)題網(wǎng)上搜索結(jié)果中有很多答案，但是經(jīng)過(guò)先森實(shí)踐后，最終覺(jué)得有用的是在style.css中添加以下代碼：/***修復(fù)iPhone橫屏后字體變大問(wèn)題**//www.cnidcc.cn/wyzshjj_iphone_sjhpztbdwt.html*/@media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:100%}}@media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:100%}}@media only screen and (-webkit-min-device-pixel-ratio: 2){body{-webkit-text-size-adjust:100%}}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){body{-webkit-text-size-adjust:100%}}其中最重要的代碼這個(gè)屬性：-webkit-text-size-adjust“-webkit-text-size-adjust”是CSS3中的一個(gè)屬性。這個(gè)屬性，從字面上來(lái)看，就是“WebKit的文字大小調(diào)整”的意思。什么是WebKit呢？這是一種開(kāi)源的瀏覽器引擎，而蘋(píng)果的safari瀏覽器用的就是這種內(nèi)核。其實(shí)chrome、Android的也是WebKit內(nèi)核，但是先森調(diào)試的時(shí)候用的是iPhone，所以這里就只說(shuō)iPhone了，而且好像只有iPhone容易遇到這個(gè)問(wèn)題。在WebKit內(nèi)核的瀏覽器中規(guī)定，當(dāng)在css中定義的中文font-size小于12px的時(shí)候,瀏覽器仍然使用12px。字體也會(huì)隨著網(wǎng)頁(yè)的變大而變大，這也是當(dāng)你手機(jī)橫屏?xí)r，字體變大的原因。而控制這個(gè)功能的，就是CSS 中的 -webkit-text-size-adjust。text-size-adjust 設(shè)為 none 或者 100% 則關(guān)閉字體大小自動(dòng)調(diào)整功能。大家可以看出，先森在上面提出的代碼中，用的是100%而不是none，這是為什么呢？先森看了一篇博文，當(dāng)時(shí)沒(méi)有收藏，所以現(xiàn)在也不知道是哪看到的了。博主提出，添加none會(huì)有問(wèn)題，所以建議設(shè)置為100%。當(dāng)時(shí)博主沒(méi)有說(shuō)是什么問(wèn)題，我們想想也就明白了。如果設(shè)置none的話，隨著網(wǎng)頁(yè)變大，你的文字還是不會(huì)變化，這就導(dǎo)致用戶體驗(yàn)不好了。所以也有很多回答建議不要講該屬性設(shè)置為全局屬性。先森最初找到的代碼也是設(shè)置的none，但是看了這篇文章后先森將其改為100%。其實(shí)用none也沒(méi)有問(wèn)題，因?yàn)樯厦娴乃男写a是判斷瀏覽器寬度后生效的。這一點(diǎn)就見(jiàn)仁見(jiàn)智了，根據(jù)大家的實(shí)際情況來(lái)使用。

成航先森，成都航院計(jì)算機(jī)系一個(gè)學(xué)生的個(gè)人網(wǎng)站。磕磕碰碰，從去年6月19日建站以來(lái)，終于本站又迎來(lái)了一個(gè)大的改版。本次改版主要針對(duì)的是網(wǎng)站的自適應(yīng)，即根據(jù)訪問(wèn)者屏幕的寬度，調(diào)整網(wǎng)頁(yè)布局。以前先森采用的是PC端使用先森自己制作的主題，手機(jī)端使用"WordPress Mobile Themes"插件，將移動(dòng)端的訪問(wèn)設(shè)置為知言Tinection主題。這個(gè)主題提供收費(fèi)和免費(fèi)兩個(gè)版本，小站當(dāng)然用的免費(fèi)版本。本來(lái)用著還好，但是先森始終覺(jué)得手機(jī)端用這個(gè)主題，顯得非常的不流暢，近期更是產(chǎn)生了圖片不顯示的問(wèn)題。先森真好有空，索性就開(kāi)始網(wǎng)站自適應(yīng)制作了。曾經(jīng)在貼吧里就有站長(zhǎng)提醒先森，手機(jī)端上Tinection主題不怎么好用，現(xiàn)在看來(lái)確實(shí)不怎么合適。經(jīng)過(guò)幾天的鼓搗，終于將這個(gè)自適應(yīng)做出來(lái)了。如果有站長(zhǎng)朋友訪問(wèn)可以看出，網(wǎng)站有點(diǎn)知更鳥(niǎo) 鳥(niǎo)叔的Begin主題的痕跡。Begin主題是收費(fèi)主題，售價(jià)299元。收費(fèi)主題的前端代碼當(dāng)然寫(xiě)的夠好，先森也只能借鑒前輩了。來(lái)看看本站在各終端的樣式：主題各終端樣式上圖可以看出，此次本站對(duì)各終端的顯示還是比較適配的。先森通過(guò)百度站長(zhǎng)工具的移動(dòng)適配中的移動(dòng)友好度檢測(cè)了一下，這次終于不是以往的各種優(yōu)化建議了：百度移動(dòng)友好度雖然現(xiàn)在網(wǎng)站的各方面還有一點(diǎn)小問(wèn)題，但是先森會(huì)竭盡所能的修復(fù)的。如果網(wǎng)友們發(fā)現(xiàn)了什么BUG，希望能在下面的評(píng)論區(qū)提醒先森（拜托拜托~~）。通過(guò)這次的實(shí)戰(zhàn)，先森學(xué)到了很多前端設(shè)計(jì)方面的技能，尤其是CSS和JS。CSS中規(guī)定元素定位類型的position 屬性，決定浮動(dòng)的float屬性，清除浮動(dòng)用的clear屬性等等，這些先森會(huì)慢慢的整理分享出來(lái)。為了緬懷過(guò)去，先森也將網(wǎng)站的改版前的首頁(yè)全圖貼出來(lái)：改版前的成航先森本文開(kāi)頭也寫(xiě)了，本站終于“又”迎來(lái)了一個(gè)大的改版。之所以說(shuō)“又”，是因?yàn)楸菊局安唤小俺珊较壬保恰俺啥己皆河?jì)算機(jī)工程系”。而改名的原因，就是與官網(wǎng)產(chǎn)生了沖突。曾今先森改版的時(shí)候也很糾結(jié)，所以發(fā)文一篇：糾結(jié)，建站“成航先森”這個(gè)名字，是先森征求了很多同學(xué)的意見(jiàn)，很多朋友幫忙想了很多很多的名字，最終選定了這個(gè)名字，并一路走到現(xiàn)在。真的很感謝先森的這些朋友們。先森有些文章的開(kāi)頭，帶上了“【先森有友】”，這些都是朋友們的日志，或者讓先森分享的技能。兩次改版，一次是被動(dòng)的，糾結(jié)的；一次是主動(dòng)的，高興的。雖然不知道本站能走多遠(yuǎn)，但先森希望能盡力的走下去。