資訊專欄INFORMATION COLUMN
摘要：我在給一個(gè)定位元素垂直居中的時(shí)候慣性的設(shè)置了設(shè)置完成后沒有發(fā)現(xiàn)問題，后來無論時(shí)美工還是測試都反應(yīng)這個(gè)元素字體模糊。后來經(jīng)過反復(fù)排除認(rèn)定了時(shí)的鍋。經(jīng)過查資料時(shí)應(yīng)為要移動(dòng)的元素的高度時(shí)奇數(shù)的。動(dòng)畫在渲染非整數(shù)的時(shí)就會(huì)出現(xiàn)字體模糊。
我在給一個(gè)定位元素垂直居中的時(shí)候慣性的設(shè)置了
.element {
position: absolute;
top: 50%;
transfome: translateY(-50%);
}
設(shè)置完成后沒有發(fā)現(xiàn)問題，后來無論時(shí)美工還是測試都反應(yīng)這個(gè)元素字體模糊。
我還是第一次遇見這個(gè)問題。后來經(jīng)過反復(fù)排除認(rèn)定了時(shí) transform 的鍋。
經(jīng)過查資料時(shí)應(yīng)為要移動(dòng)的元素的高度時(shí)奇數(shù)的。css 動(dòng)畫在渲染非整數(shù)的 px 時(shí)就會(huì)出現(xiàn)字體模糊。甚至?xí)r上下反復(fù)移動(dòng)。
解決辦法：
給定居中元素偶數(shù)高度(基本沒用，很多情況我們無法寫死高度)。
不用動(dòng)畫用margin,不過margin的百分比是相對于父級(jí)的。我們還是要知道元素的準(zhǔn)確高度。
.element {
position: absolute;
top: 50%;
margin-top: ...;
}
給與定位元素一個(gè)父級(jí)。使用height:100% 然后設(shè)置flex布局的垂直居中
.father {
display:flex;
align-items:center
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115821.html
摘要：不允許負(fù)值用百分比來定義縮放比例。解決這個(gè)很簡單，在父元素中使用即可解決該。列寬度由單元格內(nèi)容設(shè)定。定義僅有大寫字母。不過，要讓任何元素生效還得借助于一點(diǎn)點(diǎn)。 css/css3常用樣式 CSS修改選中文字的顏色 html代碼： 第一段文字選中效果 第二段文字選中效果 css代碼： .p1::selection{background:red;color:#fff;} .p2::selec...
摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會(huì)隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對移動(dòng)Web開發(fā)需要注意...
摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會(huì)隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對移動(dòng)Web開發(fā)需要注意...
摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設(shè)計(jì)稿為基準(zhǔn)等比例設(shè)置。給根節(jié)點(diǎn)設(shè)置一個(gè)基礎(chǔ)值，然后頁面的所有元素布局均相對于該值采用單位設(shè)定。 1、困擾多時(shí)的問題 在這之前做web app開發(fā)的的時(shí)候，在自適應(yīng)方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個(gè)平衡值寫死，我們的設(shè)計(jì)稿都是iPhone5的640 * 1136標(biāo)準(zhǔn)，所以高度一般取個(gè)大概值，各種圖標(biāo)的...
閱讀 3121·2023-04-26 01:58
閱讀 962·2021-11-24 09:38
閱讀 3293·2021-09-03 10:29
閱讀 722·2021-08-21 14:10
閱讀 1498·2019-08-30 15:44
閱讀 3096·2019-08-30 14:10
閱讀 3222·2019-08-29 16:32
閱讀 1485·2019-08-29 12:48
