Zero Block
Попробуй уменьшить окно, чтобы увидеть изменения цвета zero при помощи CSS и текста при помощи JavaScript
1
2
1-5 мин.
CSS
JavaScript
Ограничить код по разрешению экрана
Скопировать код и вставить в блок т123
Вставить по комментариям в коде CSS (код между <style> и </style>) и при необходимости JavaScript (код между <script> и </script>)
Скопировать код
Пример CSS:
<style>
#rec519289386 .t396__artboard { background-color: #dc143c; }
</style>
Копировать только то, что между <style> и </style>
<style>
#rec519289386 .t396__artboard { background-color: #dc143c; }
</style>
Копировать только то, что между <style> и </style>
Пример JavaScript:
<script>
function mobile() { $('.rezolution div').html('Текущее разрешение < 480рх') }
</script>
Копировать только то, что между <script> и </script>
<script>
function mobile() { $('.rezolution div').html('Текущее разрешение < 480рх') }
</script>
Копировать только то, что между <script> и </script>
<style>
@media screen and (max-width: 480px) {
/*CSS-Код для разрешения 0-480px*/
}
@media screen and (min-width: 481px) and (max-width: 640px) {
/*CSS-Код для разрешения 480px-640px*/
}
@media screen and (min-width: 640px) and (max-width: 960px) {
/*CSS-Код для разрешения 640px-960px*/
}
@media screen and (min-width: 960px) and (max-width: 1200px) {
/*CSS-Код для разрешения 960px-1200px*/
}
@media screen and (min-width: 1200px) {
/*CSS-Код для разрешения 1200px+*/
}
</style>
<script>
function mobile() {
/*Javascript-Код для разрешения 0-480px*/
}
function mobileHorizontal() {
/*Javascript-Код для разрешения 480px-640px*/
}
function tablet() {
/*Javascript-Код для разрешения 6400px-960px*/
}
function tabletHorizontal() {
/*Javascript-Код для разрешения 960px-1200px*/
}
function pc() {
/*Javascript-Код для разрешения 1200px*/
}
// Пороги переключения для JavaScript можно менять здесь
var bounds = [
{min:0,max:480,func:mobile},
{min:481,max:640,func:mobileHorizontal},
{min:641,max:960,func:tablet},
{min:961,max:1200,func:tabletHorizontal},
{min:1201,func:pc}
];
// Дальше ничего изменять не нужно
var resizeFn = function(){
var lastBoundry;
return function(){
var width = window.innerWidth;
var boundry, min, max;
for(var i=0; i<bounds.length; i++){
boundry = bounds[i];
min = boundry.min || Number.MIN_VALUE;
max = boundry.max || Number.MAX_VALUE;
if(width > min && width < max
&& lastBoundry !== boundry){
lastBoundry = boundry;
return boundry.func.call(boundry);
}
}
}
};
$(window).resize(resizeFn());
$(document).ready(function(){
$(window).trigger('resize');
});
</script>