加絨打底褲網(wǎng)站建設左右布局適配如何實現(xiàn)？

2009-12-31 模板建站專題

新的一年加入新的公司，新的公司做新的項目。公司涉及到的項目基本都是海外的，沒有國內的。做過國際化項目的同學應該知道，世界上每個國家的風俗習慣都不同。對于前端開發(fā)來說，就網(wǎng)頁布局這方面就有正常的ltr布局，即：從左往右布局。但是在一些國家，比如阿拉伯，希伯來等國家，卻有著和我們不一樣的習慣，遵從了我們老祖先從右往左的閱讀習慣，文字也是從右往左書寫的習慣，當然是看不懂的。站在前端的角度就是rtl布局。

不難看出來，加絨打底褲網(wǎng)站建設的布局樣式了，箭頭，文字與我們的都是相反的。

公司在做雙語app，因為我不知道阿拉伯語是從右往左的閱讀，在分析需求的時候也沒有人講明這一點，也是之后才知道，可是那個時候英語的頁面布局已近差不多了（這也算是一個坑吧）。所以就要為后面阿語的布局采取解決方案。重寫是不可能了，因為已經(jīng)做了10多個頁面了。

下面說一下我的處理方式。

面的網(wǎng)站其實都是闡明了一個宗旨，我們如果要進行CSS從右往左的布局，那么還需要使用到中國網(wǎng)站基本用不到的一個屬性direction，值是ltr或者rtl。

經(jīng)過自己的摸爬打滾，最終采取了一種方案：direction + 左右對稱 + flex布局。

怎么說呢？意思就是我們的方向主要是由direction進行控制，比如我們要ltr布局，我們在只需要對HTML標簽進行設置<html dir='lrt'/>。這樣就可以使html的布局成為從左往右布局，當然，html的默認的布局方式就是從左往右布局的。如果是從右往左布局的話，那么dir='rtl'就可以了。

上面是的html進行屬性設置，當然，還可以從CSS入手。

html { direction: ltr; } /* or */ html { direction: rtl; }

我建議還是直接寫在標簽上面，作為一個屬性，我們更好獲取與動態(tài)修改。

這就完了么？其實并沒有。

我們來舉個?：

這樣的一個盒子，我們給了他左邊距以及上邊距各100px，html的布局是ltr

現(xiàn)在我們把html的dir屬性改成rtl看看。

結果我們是大失所望。外邊距的值仍然是左上兩個方向，改變了dir屬性以后，還是左上。而我們理想的應該是右上的。

所以我們得出：direction屬性雖然可以改變文檔的布局方式，但是，這并不能解決我們使用了left，right等位置控制的屬性（比如：margin-left,padding-left,定位中的left，還有就是transform中的偏移等等）。

因為這個問題，前人已經(jīng)為我們提供了一個框架rtlcss。這個框架可以幫我們吧CSS中設置的left和right等控制左右方向的屬性互換?；蛘呤鞘褂脀ebpack的rtl插件等也可以。

但是這樣也有問題：

一是這樣會創(chuàng)建兩個CSS包，我們需要根據(jù)HTML的語言方向引入不同的CSS包模塊。
二是這個插件無法控制js代碼中動態(tài)生成的left以及right屬性，如果是使用js我們也需要進行判斷。

direction+左右對稱+flex布局來看看

如果我們采用direction+左右對稱+flex布局來看看

同樣是這個盒子，外層套了一個父容器，以供處理彈性盒模型，再給父容器一個內邊距，使用

flex-direction設置位置。這樣在html的dir屬性變成rtl后，我們無需改動任何的css樣式，仍可以實現(xiàn)從右往左的布局方式。

在2019這個年代了，大部分的瀏覽器都支持flex布局了，如果是老版本的瀏覽器，我們也可以考慮不兼容了，直接放棄這一部分的人，就不能慣著。所以這個模式還是可行的，更適合那些左右對稱的布局方式。不過這個方式也有缺點，就是js控制的仍然無法得到合理的處理，如果是js，可以考慮flex。

其他

網(wǎng)上還有一些大牛說可以使用css屬性的transform，scale和rotate。

這種方式我試過，鏡像翻轉，這個方式有一個很大的弊端，又或許是我沒有找到合適的解決方案。就是如果使用定位，層級高的鏡像翻轉后會在最下面，控制層級為負數(shù)也不一定可以，尤其是使用一些第三方的UI框架的時候。所以我認為目前這種方案可能不合適。

以上就是我關于網(wǎng)站ltr和rtl布局的一些理解和建議，每個方法都可行但是都有弊端，選取合適的方案來高效的開發(fā)自己的網(wǎng)站吧。

上一篇：羊絨大衣網(wǎng)站建設中防止批量入侵SQL注入網(wǎng)站返回觀點列表下一篇：秒殺胸罩網(wǎng)站建設制作用云完全破解

本文標簽：

本文地址： http://www.bmwdream.cn/a/767.html

相關專題

品牌官網(wǎng)設計
杭州派迪科技為高端客戶提供品牌官網(wǎng)咨詢策劃，品牌官網(wǎng)設計，品牌官網(wǎng)建設開發(fā)服務，以國際化視野和標準為基礎，為各行業(yè)領軍品牌提供高端企業(yè)網(wǎng)站定制、策劃、設計、互動與制作
查看詳情
大策略營銷門戶網(wǎng)站
杭州派迪科技有自己的營銷型網(wǎng)站CMS系統(tǒng)，適合白帽SEO網(wǎng)站。特別對大策略的營銷型門戶網(wǎng)站制作有一定的經(jīng)驗，曾經(jīng)為上海天擎外貿行業(yè)網(wǎng)站、浙江兆龍營銷型門戶、先臨三維門戶營銷網(wǎng)站提供全程的技術支持及SEO優(yōu)化指導
查看詳情
集團/上市公司網(wǎng)站
杭州派迪科技為杭州本地集團公司提供網(wǎng)頁設計、制作、開發(fā)服務，為集團公司網(wǎng)站建設提供了響應式、營銷型、品牌型、門戶型網(wǎng)站建設需求，歡迎廣大集團公司客戶咨詢
查看詳情
外貿網(wǎng)站建設
杭州派迪科技為高端客戶提供外貿網(wǎng)站咨詢策劃，外貿官網(wǎng)設計，外貿官網(wǎng)建設開發(fā)服務，以谷歌搜索引起算法為基礎，為各行業(yè)外貿公司提供高端企業(yè)外貿網(wǎng)站定制、策劃、設計、互動與制作
查看詳情
企業(yè)網(wǎng)站建設
高端專業(yè)、令人印象深刻的用戶界面、易于訪問——企業(yè)網(wǎng)站必須反映一切，因為派迪科技在這里提供幫助，憑借精湛的技術、豐富的經(jīng)驗、與客戶的持續(xù)溝通以及對每一個細節(jié)的關注，我們確保在快速的周期時間內提供優(yōu)質的服務。
查看詳情
半定制網(wǎng)站
杭州派迪科技模板網(wǎng)站建設專題_各行業(yè)方案專題欄目提供各行業(yè)產(chǎn)品適合的網(wǎng)站建設方案,幫助企業(yè)了解派迪科技建站效果等信息,您可以通過本站了解各行業(yè)網(wǎng)站建設方案,如需要獲取本行業(yè)定制網(wǎng)站建設方案,可以聯(lián)系在線客服或撥打電話咨詢
查看詳情