1. 3D-преобразование Safari игнорирует уровень z-индекса
В браузере Safari (этот браузер Safari включает Safari на iOS, WeChat на iPhone и Safari на Mac OS X), когда мы используем 3D-преобразование, если элемент-предок не имеет overflow:hidden/ Ограничения, такие как прокрутка/авто, будут напрямую игнорировать себя и другие элементыz-indexПорядок наложения задан, и реальная трехмерная перспектива напрямую используется для рендеринга.
Например, в следующей сцене модуль в красной рамке на рисунке использует 3D-преобразование для выполнения анимации вращения, но в браузере Safari слой маски QR-кода игнорируется.z-index, результаты визуализируются с использованием реальной трехмерной перспективы. Появились перекрывающиеся баги:
Решение:
- Родительский, любой родительский, не основной уровень, настройка overflow:hidden восстанавливает тот же рендеринг, что и в других браузерах.
- Бороться с ядом ядом. Иногда страница сложная, и мы не можем установить overflow:hidden для родителя, тогда мы можем установить достаточно большое значение translateZ для затронутого элемента, например, translateZ(100px).
2. Совместимость с центрированием текста
Обычный способ центрировать текст вверх и вниз — сделать высоту элемента и высоту строки равными, но в среде Android, когда размер шрифта
Решение:
-
Оценка системной среды (Android/IOS) для тонкой настройки;
-
Размер шрифта, высота и ширина увеличиваются в 2 раза и масштабируются с помощью преобразования.
height: 1rem;
width: 2rem;
font-size: 0.5rem;
变成：
height: 2rem;
width: 4rem;
font-size: 1rem;
transform: scale(0.5);
Однако из-за занимаемого пространства после увеличения левое и правое поля останутся пустыми, вам необходимо использовать отрицательное значение поля.margin: -0.35rem -0.45rem 0;Корректирование
- Есть решение поменять rem на px.
3. 2 модуля, обернутые этикеткой, повернуты на 90 градусов, и один из модулей не защелкнется
Эффект анимации определяется следующим образом (код sass):
@keyframes official-featured_rotate {
10%,50%{
transform:rotateY(90deg);
}
60%,100%{
transform:rotateY(0deg);
}
}
&-rotate {
position: absolute;
width: rem(350/2);
height: rem(160/2);
transform-style:preserve-3d;
transform:translate3d(0,0,0);
&.ani_rotate {
animation:official-featured_rotate 5s linear 0s infinite;
animation-delay: 2s;
}
&__item {
width: rem(350/2);
height: rem(160/2);
position: absolute;
&:nth-child(1) {
transform: translateZ(rem(350/4));
}
&:nth-child(2) {
transform: rotateY(90deg) translate3d(0,0,rem(350/4));
}
}
}
Вот 2 тега a с эффектом поворота на 90 градусов, так что два тега a могут отображаться циклически. Основные стили двух здесь одинаковы, как и ширина и высота. Но под Android (iOS нормально) только первый тег, который видно при открытии страницы, может нормально прыгать и нормально связывать события. На второй а нельзя перепрыгнуть, я просто думал, что можно перепрыгнуть, нажав на событие, но привязка любого события не подействует.
Решение:
Потом тест обнаружил, что при повороте (пока не до конца повернут на 90 градусов) все еще можно нажимать. Так угол поворота поменяли на 89,99 градусов, и все стало нормально. Эффект анимации изменен на:
@keyframes official-featured_rotate {
10%,50%{
transform:rotateY(-89.99deg);
}
60%,100%{
transform:rotateY(0deg);
}
}
Затем я посмотрел stackoverflow (stackoverflow.com/questions/2…). На это тоже есть решение.
4. Используйте currentColor для упрощения css
При установке цвета границы, цвета фона и других цветов вы можете использовать currentColor [тот же, что и цвет шрифта текущего элемента] для упрощения CSS.
.div{
color: rgba(0,0,0,.85);
font-weight: 500;
text-align: left;
padding: 20px;
border: solid 1px currentColor;
}
5. ОТКЛЮЧИТЬ эффекты с серыми фильтрами
Серое изображение можно отфильтровать напрямую, не вырезая дополнительное изображение. Как показано на рисунке:
Решение:
.coupon_style .disable {
-webkit-filter: grayscale(1);
}
6. Реализация изогнутых теней
- Множественные тени перекрываются, то есть нормальные тени + кривые тени
- При нормальных обстоятельствах есть прямоугольник с нормальной тенью, который используется в качестве основной проекции.В это время определите скругленный прямоугольник с определенным радианом и закругленными углами, а затем поместите его под нормальный прямоугольник и немного выставьте тень с радианом внизу, так что если это так, вы можете сформировать эффект изогнутой проекции.
Эффект:
7. Реализация искривленных теней
Используя :before и :after, а также природу абсолютного позиционирования, можно сформировать прямоугольник, который в настоящее время сочетается с атрибутами перекоса и поворота, которые обычно используются в CSS3. Параллелограмм с углом поворота может быть сформирован, в то время как наложение на исходный прямоугольник может вызвать эффект деформации.
Эффект:
Код:
8. Используйте -webkit-mask для достижения эффекта маски
Изображение эффекта:
background: url("images/logo.png") no-repeat;
-webkit-mask : url("images/mask.png");
Черный цвет в mask.png представляет собой непрозрачный (альфа: 1), а другие части прозрачны (альфа: 0), закройте его на фоновом изображении, примечание: фоновое изображение, соответствующее позиции прозрачности в mask.png, также станет прозрачным , оставляя непрозрачную форму, т. е. видимая форма фонового изображения такая же, как видимая форма mask.png. То есть «маска».
9. Метод адаптивного заполнителя изображения
Когда изображение загружается неправильно или до завершения загрузки, поскольку высота изображения равна 0, его контейнер схлопнется из-за отсутствия содержимого, поэтому контейнер не может быть поднят и свернут. изображение будет мерцать после загрузки изображения.
В CSS, когда значение padding-top/bottom указано в процентах, его значение является эталонным объектом ширины его родительского элемента. Следовательно, в случае фиксированного соотношения сторон padding-top/bottom можно использовать для адаптивных заполнителей изображения, чтобы решить проблему мерцания страницы.
Если вы установите значение padding-top/bottom только в процентах, возникнет проблема, то есть свойство max-height контейнера в этом методе будет недействительным, и максимальную высоту контейнера нельзя будет ограничить. .
Следовательно, вы можете добавить в контейнер подэлемент псевдоэлемента для удержания содержимого, подэлемент имеет padding-top: 100% и в то же время дать контейнеру максимальную высоту, чтобы попробовать чтобы ограничить высоту контейнера, и, наконец, содержимое будет абсолютно позиционировано. Просто добавьте его. Такие как:
#container{
width: 50%;
max-height:300px;
background-color:#ddd;
/*由于margin存在塌陷的问题，需要通过构建BFC来保证容器不会受到影响，因此这里可以给容器一个overflow:hidden来保证伪元素的margin不会塌陷。*/
overflow:hidden;
position: relative; /* 父容器相对定位 */
}
.placeholder::after{
content:"";
display:block;
margin-top:100%;
}
img{
position:absolute; /* 内容绝对定位 */
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%); /* 控制内容绝对定位位置 */
width:80%; /* 控制图片不溢出，因此这里使用的图片实际宽度受父容器影响 */
}
Однако для изображений с неопределенными пропорциями это может привести к неполному отображению изображения, поэтому будьте осторожны при их использовании.
10. Лучшие практики отзывчивости страницы
После крупномасштабной проектной практики следующий код CSS является лучшей практикой, основанной на rem, vm и calc:
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39);
}
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
font-size: calc(18px + 4 * (100vw - 414px) / 586);
}
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px每100像素宽字体增加1px(20px-24px) */
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400);
}
}
@media screen and (min-width: 1000px) {
html {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
}
}
наконец
- Добро пожаловать, чтобы добавить меня в WeChat (winty230), привлечь вас в техническую группу, долгосрочный обмен и обучение...
- Добро пожаловать, чтобы обратить внимание на «Front-end Q», серьезно изучить интерфейс и быть профессиональным техническим специалистом...