一级毛片视频在线观看-一级毛片视频免费-一级毛片视频播放-一级毛片看真人在线视频-国产高清在线精品一区a-国产高清在线精品一区二区

響應(yīng)式開發(fā)的心得

作者：網(wǎng)站建設(shè)公司　來源：佛山網(wǎng)站建設(shè)日期：2020-11-09 瀏覽： 次

網(wǎng)站建設(shè) > 建站教程 > 網(wǎng)頁設(shè)計 > 響應(yīng)式開發(fā)的心得

佛山網(wǎng)站建設(shè)

　　什么是響應(yīng)式？響應(yīng)式的頁面在不同的屏幕有不同的布局，換句話說，使用相同的html在不同的分辨率有不同的排版。如下圖所示：

佛山網(wǎng)站建設(shè)

　　響應(yīng)式布局是為了解決適配的問題，傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套，手機端再開發(fā)一套，而使用響應(yīng)式布局只要開發(fā)一套就好了。因為它是用的同樣html，所以它的JS邏輯交互也只需寫一套就好了，缺點是CSS比較重。
　　傳統(tǒng)的手機端適配常見有三種解決方案，種是bootstrap的columns布局；第二種是使用全局的rem，先根據(jù)屏幕換算1rem等于多少個px，然后設(shè)置html標簽的font-size為多少個rem，屏幕越大，則font-size越大，然后頁面所有的元素的寬高和字體大小都用rem等比例縮放；第三種是阿里的flex box，這種方案和第二種類似，不同點是頁面內(nèi)容的字體大小是用的px，而不是比例縮放的rem。種需要額外引入一個框架。第三種相對第二種來說應(yīng)該更合理點，因為正文的字體常用的為14px或者16px，如果一個頁面在這個手機字號是15.5px，在另外一個手機又變成了14.9px，這樣可能會有點奇怪。
　　而使用響應(yīng)式布局就不需要進行rem的換算，下面通過上圖的那個例子一步一步地分析怎么做響應(yīng)式。
　　1.設(shè)置不同分辨率頁面兩邊留白

　　先一個頁面的主體內(nèi)容有大的寬度，當屏幕超過這個寬度時這個中間的主體內(nèi)容大就這么大了，不會再變大了，也就是說它固定一個大寬度，然后居中顯示，如大為1080px。然后當大于1024px時，頁面主體內(nèi)容小寬為960px，兩邊自動留白；在500px到1024px之間兩邊保持留白40px；而當小于500px時就認為是手機，兩邊留白20px。所以計算一下，container的代碼如下：

佛山網(wǎng)站建設(shè)

　　總體的思想是留白要合適，既不能留太多，導(dǎo)致中間內(nèi)容太窄，也不能讓中間的內(nèi)容顯得太大。這個其實和bootstrap的container思想一致，只是你可能要根據(jù)你自己的業(yè)務(wù)特點、用戶人群等做不同留白策略。
　　2.屏幕變小時，一頭變窄，另一頭不變

　　當屏幕變小或者瀏覽器窗口拉小時，中間內(nèi)容的寬度就不能保持1080px，它得跟著變小，而在變小的過程中，往往要保持一邊不變，另一邊隨頁面變窄，如下圖所示：

佛山網(wǎng)站建設(shè)

　　右邊的結(jié)果欄寬度保持不變，左邊的表單欄寬度縮小。因為右邊一旦就窄不好看了，如果右邊變窄，那么字體也要相應(yīng)縮小，字號一縮小，右邊上下留白就變得太大，這樣就不美觀了，所以只能采取右邊保持不動的策略去縮小左邊的內(nèi)容。這種場景比較常見，右邊如果是一個頭像的話，它也不能跟著縮小，它一縮小高度也要跟著縮小，導(dǎo)致上下太空，所以這種情況也不能動。
　　3.保持中間留白固定，縮小內(nèi)容寬度

　　左欄的寬度變小應(yīng)該怎么變呢？有一個原則，就是要保持中間的間距固定，而兩邊的內(nèi)容寬度相應(yīng)縮小，如下圖所示：

　　所以就要借助CSS3的calc，如下所示：
　　1
　　2
　　3
　　input{
　　width:calc((100%-20px)/2)
　　}
　　calc的兼容性IE10及以上支持，android 4及以下不支持，所以考慮到不支持的設(shè)備，可以簡單做個兼容，如下代碼所示：
　　1
　　2
　　3
　　4
　　input{
　　width:48%;
　　width:calc((100%-20px)/2);
　　}
　　如果不支持calc就用48%，這樣差別其實不是很大，就是不是很精確。真的需要的話，你可以多寫幾個媒體查詢變得更精確。
　　4.左右布局變成上下布局
　　當屏幕拉得很小的時候，左欄已經(jīng)縮得很小了，再變小就不協(xié)調(diào)了，所以這個時候要把左右布局改成上下布局，把右邊的內(nèi)容往下面放。因為右欄在大屏的時候是float:right，所以在中屏的時候覆蓋掉這個浮動的屬性，變成float:none就可以了。原本右欄的內(nèi)容有四行，都比較短，可以考慮把它下面的三行排成一行，即讓它們浮動。如下面代碼所示：
　　1
　　2
　　3
　　4
　　5
　　6
　　7
　　8
　　9
　　10
　　11
　　12
　　13
　　14
　　15
　　.cal-result{
　　float:right;
　　width:330px;
　　}
　　1
　　 media(max-width:800px){
　　.cal-result{
　　float:none;
　　width:100%;
　　}
　　.cal-result.result{
　　float:left;
　　width:33%;
　　}
　　}

　　讓每一個result占1/3，然后浮動，效果如下：

佛山網(wǎng)站建設(shè)

　　5.寬度太小時，自動換行
　　特別是當內(nèi)容是列表ul形式的時候，排不下的li應(yīng)當自動換到下一行。當然也可以手動控制，如下：
　　1
　　2
　　3
　　4
　　5
　　6
　　7
　　8
　　9
　　10
　　11
　　 media(max-width:800px){
　　.result{
　　width:33%;
　　}
　　}
　　1
　　 media(max-width:400px){
　　.result{
　　width:50%;
　　}
　　}
　　在屏幕寬度小于400的時候，每個結(jié)果就占50%，這樣就排成兩行了。這也是一種常用的辦法，但是在我們這個例子，如果數(shù)字比較小，在iPhone6 375px的屏幕上還是排得下的，如果能保持在一行相對比較美觀。而且固定50%，如果當數(shù)字比較大時也有可能會有重疊的危險，這個也有辦法，就是別寫死寬度，而是寫死m(xù)in-width為50%，這樣當內(nèi)容比較長時，float的元素同一行排不下就會自動換行。但是知名還是要個辦法讓它能根據(jù)內(nèi)容長度自動換行，當然可以用JS計算，但是有點麻煩。
　　這個時候flex就派上用場了，很簡單，只要設(shè)置兩個屬性：
　　1
　　2
　　3
　　4
　　5
　　.result-container{
　　display:flex;
　　justify-content:space-between;
　　flex-wrap:wrap;
　　}

　　space-between讓子元素挨著容器的兩邊等間距排列，而wrap屬性讓子元素自動換行，當容器寬度不夠的時候，就有了以下的效果：

佛山網(wǎng)站建設(shè)

　　這樣還有一個小問題，就是當內(nèi)容如果剛剛好占滿時，兩個項之間就沒有間距了，如下圖所示：

佛山網(wǎng)站建設(shè)

　　這樣就貼在一起了，由于flex的space-between不能指定小的space，所以只通過margin或者padding的方法，如給元素添加margin-right：
　　1
　　2
　　3
　　.result:not(:last-child){
　　margin-right:10px;
　　}

　　效果如下：

佛山網(wǎng)站建設(shè)

　　這樣比貼在一起顯示的效果好。
　　還有從大屏變成成小屏的時候有些字號主要是標題的字號和間距要相應(yīng)調(diào)小，這種變小是階梯變化的，而不是像rem一樣連續(xù)變化，而且這種階梯一般只要有兩個就夠了，一個大屏的，一個小屏的。如果你需要做很多階梯的話，那你的排版很可能有問題。
　　6.使用響應(yīng)式圖片
　　如相同的頭圖，在電腦上需要使用大圖，但是手機上面使用小圖就好了，不然會造成手機上加載慢浪費流量等問題，一個辦法是使用backgound-image結(jié)合媒體查詢，如下所示：
　　1
　　2
　　3
　　4
　　5
　　6
　　7
　　.banner{
　　background-image:url(/static/large.jpg);
　　}
　　 media(max-width:500px){
　　background-image:url(/static/small.jpg);
　　}
　　這種方法的缺點是對SEO不太友好，因為如果使用img標簽還可以寫個alt屬性。
　　第二種常用辦法是使用img的srcset或者picture標簽做響應(yīng)式圖片，這個我在《Effective前端7：加快頁面打開速度》已經(jīng)提到，這里不再重復(fù)。
　　這種響應(yīng)式圖片除了大小屏之外，還可以兼顧視網(wǎng)屏即dpr為2及以上的和普通屏dpr為1的屏幕，即在高dpr的屏幕使用2倍圖，而普通屏幕使用1倍圖。
　　7.其它問題處理
　　有些地方大小屏的排版差異比較大，例如有些內(nèi)容大屏的時候是挨在一起，而小屏離得比較遠，這個時候你可能得重復(fù)html，寫兩份的標簽，大屏的時候隱藏掉小屏的html標簽，小屏的時候隱藏掉大屏的html標簽。并且這種情況不應(yīng)該是常例，如果你經(jīng)常要寫兩套，那說明你這個頁面可能不太適合寫響應(yīng)式，還不如直接寫兩套呢。
　　還有個問題，有時候你可能要借助rem/transform:scale做大小縮放，但這一定是下策，我們的原則還是要保持字號和間距不變，當屏幕的跨度不是很大的時候。使用transform的后果是屏幕拉小的時候，內(nèi)容跟著變小了，但是由于transform不會造成重排，它占據(jù)的高度還是那么大，下面的內(nèi)容不會跟上來。這樣就得手動計算內(nèi)容的高度。另外如果使用rem，就和響應(yīng)式的思想沖突了。如果頁面的一部分字號使用了rem，另一部分字號使用了px，這樣就不協(xié)調(diào)了，如果你全部寫rem那就不需要使用響應(yīng)式開發(fā)了。這個時候你可能要想一想，是不是UI出得有問題。讓UI重新調(diào)整。
　　還有，有時候可能會用到高度的媒體查詢，例如在高度小于多少的時候，不能讓彈框超出頁面的高度；在高度大于多少的時候，讓footer的定位fixed在底部，不然footer的下面可能會留白。

網(wǎng)頁設(shè)計

企業(yè)網(wǎng)站建設(shè)一條龍
找零度飛易網(wǎng)絡(luò)公司-fslingdu所做php網(wǎng)站建設(shè)方案、網(wǎng)站設(shè)計、網(wǎng)站制作由北京上海深圳龍崗衢州蘭州常州東營南通濟寧桂林淮安煙臺長春無錫天津昆山蘇州合肥貴洛陽昆明天津唐山泉州惠州萬州新鄉(xiāng)商丘臺州哈爾濱太原攝影?？?/strong>隨州學(xué)校商丘廣東湖南廣西江西海南廣州企業(yè)中小企業(yè)武漢南山羅湖福田虎門肇慶汕尾汕頭廣州佛山成都杭州濟南重慶福州西安廈門昆山沈陽青島徐州鄭州南京寧南寧長沙大連淄博石家莊南昌溫州珠海番禺順德南三水高明中山東莞合肥江門嘉興西寧大良容桂倫教勒流陳村均安杏壇龍江樂從北滘祖廟石灣南莊等地區(qū)企業(yè)網(wǎng)站建設(shè)(廣告)公司提供專業(yè)做網(wǎng)站價格規(guī)劃書及營銷型網(wǎng)站制作,網(wǎng)站建設(shè)基礎(chǔ)知識

上一篇：如何在微信群優(yōu)雅的發(fā)廣告

下一篇：企業(yè)進行微信開發(fā)的必要性

網(wǎng)頁設(shè)計

網(wǎng)站案例

網(wǎng)站案例

網(wǎng)站建設(shè)費用

網(wǎng)站制作電話：137 1543 1176

網(wǎng)站開發(fā)QQ:378780108

E-mail：sale@fslingdu.com如何制作網(wǎng)站QQ :378780108

網(wǎng)站建設(shè)服務(wù)

網(wǎng)站建設(shè)公司零度飛易是一家專業(yè)網(wǎng)站設(shè)計,網(wǎng)站制作、seo優(yōu)化,網(wǎng)站推廣,網(wǎng)站建設(shè)的佛山網(wǎng)絡(luò)運營公司。零度飛易在家具網(wǎng)站建設(shè)、小家電網(wǎng)站建設(shè)、服裝網(wǎng)站建設(shè)、電器網(wǎng)站建設(shè)、機械網(wǎng)站建設(shè)等行業(yè)的網(wǎng)站設(shè)計、網(wǎng)絡(luò)運營都得到行業(yè)認可，在上海、深圳、北京、廣州、佛山、中山、東莞地區(qū)有著良好的口碑品牌的網(wǎng)站建設(shè)公司。我們的使命是打造創(chuàng)新型的網(wǎng)站建設(shè)企業(yè)，能輕易地開展“互聯(lián)網(wǎng)+”業(yè)務(wù)、實現(xiàn)“互聯(lián)網(wǎng)+企業(yè)”的企業(yè)愿景。

Hi,Are you ready?

準備好開始了嗎?
那就與我們?nèi)〉寐?lián)系吧

有一個互聯(lián)網(wǎng)項目想和我們談?wù)剢?？您可以填寫右邊的表格，讓我們了解您的項目需求，這是一個良好的開始，我們將會盡快與你取得聯(lián)系。當然也歡迎您給我們寫信或是打電話，讓我們聽到你的聲音！

零度飛易 互聯(lián)網(wǎng)整合營銷

地址：佛山市順德區(qū)大良鳳翔商業(yè)廣場二座670

業(yè)務(wù)QQ：378780108

策劃專線：13715431176

E-mail：sale@fslingdu.com

合作意向表

您需要的服務(wù)

現(xiàn)有網(wǎng)站改版
我需要做微信營銷
建設(shè)全新的企業(yè)網(wǎng)站
要找長期合作公司，需要年度服務(wù)
我需要做購物商城
我需要做系統(tǒng)平臺

您最關(guān)注的地方

對功能要求比較高
對設(shè)計創(chuàng)意要求比較高
需要可以購物支付
搜索引擎排名

價格預(yù)算

1-3萬3-5萬5-8萬8-10萬10萬以上大型項目需要招標

联系附近成熟妇女| 东京热无码一区二区三区AV| 久久亚洲中文字幕无码| 亚洲色大成网站WWW在线观看| 国产人澡人澡澡澡人碰视频| 无码国产成人久久| 国产AV免费一区二区三区| 色哟哟最新在线观看入口| 成为人视频人的APP有哪些软件| 人妻 丝袜美腿 中文字幕| JIZZYOU中国少妇| 欧美激情ⅩXXXX免费视频| 97精品一区二区视频在线观看| 蜜芽国产尤物AV尤物在线看| 中文亚洲爆乳AV无码专区| 蜜桃AV自慰久久久久免费网站| 在线播放国产不卡免费视频| 麻豆我精产国品一二三产区区别| 岳两片肥美的蚌肉| 老子影院午夜精品无码| 中文精品久久久久人妻不卡| 免费无码AV一区二区| 2021韩剧在线观看韩剧网| 女局长白白嫩嫩大屁股| A一区二区三区乱码在线 | 欧| 欧美日韩精品视频一区二区三区 | 欧美激情在线播放| А√8天堂中文官网资源| 人人妻人人澡AV| 出租屋勾搭老熟妇啪啪| 睡着了强行挺进岳身体| 国产精品国产三级国产普通话| 午夜福利国产成人A∨在线观看| 国产午夜免费啪视频观看视频| 亚洲AV永久无码精品一区二区不| 精品国产一区二区AV片| 亚洲最大成人一区久久久| 麻花传媒剧国产MV在线观看| 2021国内精品久久久久精免费| 欧美乱码卡1卡2卡三卡四卡 | 香蕉国产成版人视频APP| 国精产品一区二区三区有限| 亚洲国产一区二区三区波多野结衣 | 粉嫩小泬无遮挡久久久久久| 天天躁日日躁狠狠躁日日躁| 国产下药迷倒白嫩美女网站 | 免费人成在线观看视频无码| CHINA真实VIDEOS另类| 日韩加勒比一本无码精品| 国产精品多P对白交换绿帽| 亚洲AV无码成人精品区在线h| 精品无码成人网站久久久久久 | 男生把手放进我内裤揉摸好爽 | 国产在线码观看超清无码视频| 亚洲免费福利视频| 免费高清AV一区二区三区| 啊宝宝的扇贝真会夹C视频| 四川妇女BBBWBBBWM| 护士高潮喷水白浆| 中文字幕AV一区二区三区| 人妻少妇久久中文字幕| 国产高清免费AV片在线观看不卡 | 99久久99久久久精品齐齐综合| 日本熟妇人妻ⅩXXXX| 国产乱码卡二卡三卡43| 亚洲无线码高清在线观看| 欧美xxxxx久久短视频| 疯狂做受XXXⅩ高潮高潮按摩| 亚洲AV免费高潮喷水| 狼人大香伊蕉国产WWW亚洲| メスのちトラレ_在线| 玩弄JaPan白嫩少妇一区二区| 教室内污辱女教师BD高清在线观看| 中文在线8资源库| 日日噜噜夜夜狠狠久久无码区| 国产一二三四区中| 制服丝袜自拍另类第1页| 日产精品一卡2卡三卡4卡乱码| 国产一卡2卡3卡4卡无卡国色| 一面膜上边一面膜下边韩国| 人妻少妇一级毛片内射一牛影视 | 精品人妻无码一区二| 99视频精品全部免费免费观看| 天美传媒MV在线看免费下载安装 | 人妻办公室出轨上司HD院线| 国产裸体XXXX视频在线播放 | 粉嫩虎白女毛片人体| 亚洲男人第一无码AV网| 欧美又大粗又爽又黄大片视频 | 老子影院午夜精品无码| 东京热人妻无码人AV| 亚洲人成无码网站久久99热国产| 欧亚精品卡一卡二卡三7174| 国产线路3国产线路2| 祖母和おばあちゃん的区别| 丝袜灬啊灬快灬高潮了AV| 久久精品熟女亚洲AV麻豆网站| 超高级国王游戏电影| 亚洲国产精品无码久久久秋霞1| 欧美人与性口牲恔配视频o| 国产免费久久久久久无码| 18禁止福利午夜体验试看| 无码 有码 日韩 人妻| 乱公和我做爽死我视频| 国产对白videos麻豆高潮| 在线观看AV网站永久免费观看| 双腿被绑成M型调教PⅠAY照片| 久久久久久精品免费久久18| 东京热无码人妻系列综合网站| 亚洲熟妇色XXXXX爽| 日韩内射美女人妻一区二区三区 | 在线 | 18精品免费1区2| 四川骚妇无套内射舔了更爽| 可以差差差的视频无掩盖| 国产AV毛片1区2区3区| 真实差差差无掩盖视频30分钟| 天天躁日日躁狠狠躁婷婷| 蜜臀AV无码人妻精品| 国产人妖视频一区二区| WWWらだ在线天堂中文在线| 亚洲国产美女久久久久| 日韩精品久久久免费观看| 久久久WWW成人免费看片| 丰满少妇人妻HD高清果冻传媒| 一二三四免费观看视频中国| 偷拍中国熟妇牲交| 欧美成人午夜视频| 精品国产乱码久久久久夜深人妻| 草草最新发地布地址①·| 亚洲中文精品久久久久久不卡| 特级西西人体444WWW高清大| 免费看人妻丰满熟妇AV无码片| 国产一区在线观看二区| 办公室熟妇人妻久久精品| 夜夜添夜夜添夜夜摸夜夜摸| 无码纯肉视频在线观看喷水| 女人被狂躁C到高潮视频| 交换朋友夫妻互换客厅韩国5| 顶级欧美做受XXX000| 中文字幕精品亚洲无线码一区| 亚洲AV旡码高清在线观看 | 国产无人区二卡三卡四卡不见星空| CHINESE熟女老女人HD视频| 亚洲人成人网站色www小说| 天天做天天躁天天躁| 欧美在线视频一区二区三区| 久久国产精品亚洲艾草网| 国产精华液和欧美的精华液的区别| ASIAN高潮.颤抖.抽搐BL| 亚洲熟女乱综合一区二区| 无人区码一码二码三码网页| 日本公与丰满熄的| 免费看奶头视频的网站| 精品久久久久久无码人妻| 国产精品成人久久久久久久| 暴躁老阿姨CSGO| 最新国产精品拍自在线播放| 亚洲欧美日韩国产手机在线| 无码一区二区av| 丧尸 湿润 粗大 快感 变异| 女人高潮抽搐喷液30分钟视频| 久久国产精品二国产精品| 国产日产欧产精品精品| 父债子偿BY画崖海棠| 啊轻点灬大JI巴太粗太长了在线 | 日产精品码2码三码四码区| 免费网站正能量WWW正能量| 精品无码一区二区三区水蜜桃| 国产精品无码MV在线观看| 成熟老年妇女毛茸茸| FREESEXVIDEOS性亚| 中文在线っと好きだっ最新版 | 日韩精品久久无码中文字幕| 欧美高清熟妇啪啪内射不卡自拍| 久久久久99精品成人片直播| 国内精品久久久人妻中文字幕| 国产成人欧美精品视频| 成人久久免费网站| JIZZJIZZ日本护士水好多| 1区1区3区4区产品乱码芒果| 一本久久A久久精品亚洲| 亚洲精品乱码久久久久66| 亚洲AⅤ天堂无码专区-百度| 无码AV免费网站| 色婷婷六月亚洲综合香蕉| 日本XXXX少妇高清HD| 欧美性白人极品1819HD| 女人下边水润紧致好处| 末发育女AV片一区二区| 老师露双奶头无遮挡挤奶视频| 久久精品国产成人| 精品熟女少妇AV免费观看| 精产国品一二三产品区别在| 国内精品自线在拍大学生| 国产亚洲精久久久久久无码| 国产乱妇乱子视频在播放| 国产精品三级在线观看无码| 国产精品IGAO视频| 国产精品久久久久久亚洲AV| 国产精品99久久99久久久|