資訊專(zhuān)欄INFORMATION COLUMN
摘要：大屏開(kāi)發(fā)心得布局篇因?yàn)榇笃敛皇菍?duì)外開(kāi)放的，所以可以使用固定的瀏覽器。因?yàn)榇笃疗聊缓艽?，設(shè)計(jì)師給出的設(shè)計(jì)圖通常會(huì)有很大的尺寸。所以后來(lái)還是把大屏分開(kāi)了，設(shè)計(jì)稿的每個(gè)部分拆成一個(gè)頁(yè)面，每個(gè)小屏幕顯示一個(gè)頁(yè)面。
大屏開(kāi)發(fā)心得 布局篇
因?yàn)榇笃敛皇菍?duì)外開(kāi)放的，所以可以使用固定的瀏覽器。既然這樣其實(shí)是可以使用一些相對(duì)比較新的技術(shù)的。所以在布局這塊我優(yōu)先選擇使用flexbox技術(shù)。
因?yàn)榇笃疗聊缓艽?，設(shè)計(jì)師給出的設(shè)計(jì)圖通常會(huì)有很大的尺寸。其實(shí)設(shè)計(jì)師并不知道的是大屏屏幕在再大，也不過(guò)就是一個(gè)顯示屏的尺寸。其實(shí)那這塊需要的就是一個(gè)等比縮放。設(shè)計(jì)稿通常也就是一個(gè)屏幕的大小，也不需要滾動(dòng)等其他的用戶操作。所以在布局之前需要首先設(shè)置的是外框尺寸
html, body {
height: 100%;
}
大屏首先要把要把這種尺寸的差異解決，這就體現(xiàn)出來(lái)flexbox的優(yōu)勢(shì)了。因?yàn)橹灰蚜砍鰜?lái)設(shè)計(jì)稿的實(shí)際尺寸，直接設(shè)置在flex上就可以了。
比如設(shè)計(jì)稿尺寸是3200px，對(duì)應(yīng)到flex上就是flex: 3200。
大屏模糊的問(wèn)題大屏一般都是多塊屏幕拼湊起來(lái)的一整塊屏。設(shè)計(jì)稿給的一個(gè)頁(yè)面。開(kāi)始的時(shí)候我們是按照一個(gè)頁(yè)面進(jìn)行開(kāi)發(fā)的。但是投到一個(gè)大屏的時(shí)候問(wèn)題來(lái)了，因?yàn)榉诺暮艽?，鋸齒很?chē)?yán)重。
所以后來(lái)還是把大屏分開(kāi)了，設(shè)計(jì)稿的每個(gè)部分拆成一個(gè)頁(yè)面，每個(gè)小屏幕顯示一個(gè)頁(yè)面。這樣子鋸齒情況就減輕很多。
還解決了一個(gè)問(wèn)題，就是整個(gè)屏幕的時(shí)候，字體太大。即便字號(hào)很小也會(huì)顯示很大（chrome默認(rèn)最小字號(hào)是12px，如果需要顯示更小，需要修改瀏覽器配置）。分開(kāi)就不會(huì)有這個(gè)問(wèn)題了
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84228.html
摘要：完成可視化熱搜榜和國(guó)內(nèi)疫情新增圖，提高學(xué)生的編程能力和分析問(wèn)題解決問(wèn)題的能力。下圖為百度微博知乎三大平臺(tái)的熱搜詞頻統(tǒng)計(jì)圖。后續(xù)我會(huì)補(bǔ)上薄弱項(xiàng)，為爭(zhēng)取做一名全棧技術(shù)人員而奮斗。 ...
摘要：因此在完成前面的優(yōu)化適配后，您只需考慮以下四個(gè)關(guān)鍵事項(xiàng)最大寬高比支持全屏模式對(duì)于確保游戲玩家獲得最佳的沉浸式體驗(yàn)至關(guān)重要。showImg(https://user-gold-cdn.xitu.io/2019/5/20/16ad2fac98c557d9); 作者 / Ben Gable, Partner Developer Advocate 讓我們繼續(xù)《讓您的應(yīng)用適配更多屏幕》中的話題，不...
摘要：公司接了一個(gè)當(dāng)下很火熱的，網(wǎng)上有各種模板和造好輪子付費(fèi)使用的滑動(dòng)廣告的項(xiàng)目。其中核心方法是，筆者猜測(cè)方法里應(yīng)該是先取出本里的所有類(lèi)名含有的元素，運(yùn)用的方法取出動(dòng)畫(huà)的三個(gè)屬性值，然后加上以觸發(fā)動(dòng)畫(huà)。 公司接了一個(gè)當(dāng)下很火熱的，網(wǎng)上有各種模板和造好輪子付費(fèi)使用的滑動(dòng)廣告的項(xiàng)目。網(wǎng)上的模板大部分類(lèi)似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一個(gè)稍微復(fù)雜點(diǎn)的。 研究了一下，...
閱讀 2919·2021-11-15 11:39
閱讀 1909·2021-09-24 09:48
閱讀 1092·2021-09-22 15:36
閱讀 3619·2021-09-10 11:22
閱讀 3102·2021-09-07 09:59
閱讀 981·2021-09-03 10:28
閱讀 703·2021-09-02 15:15
閱讀 2771·2021-08-27 16:24
