Что означает calc (.333 * (100vw - 12em))?

Question

Может кто-нибудь объяснить мне, что calc(.333 * (100vw - 12em)) означает в следующей строке HTML? И, в частности, значение .333; откуда это происходит?

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 
     100vw" 

Взятые из http://ericportis.com/posts/2014/srcset-sizes/

Длина может быть все виды вещей! Длина может быть абсолютной (например, 99px, 16em) или относительной (33,3vw, как в нашем примере). Вы заметите, что в отличие от нашего примера, есть много макетов, которые объединяют и абсолютные и относительные единицы. Вот в чем заключается удивительная функция поддержки calc(). Предположим, мы добавили боковую панель 12em к нашему 3-столбному макету. Мы будем регулировать приписывать наши размеры, как так:

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 
     100vw" 

Я понимаю это много:

• (мин-ширина: 36em) = медиа запрос
• известково (.333 * (100vw - 12em)) = вынесено размер
• 100vw = по умолчанию длина воспроизводимого изображения

Answer 1

Давайте проанализируем это выражение:

calc(.333 * (100vw - 12em)) 

calc средство оценки как выражение.

vw1% вид ширины, поэтому 100vw is 100% вид ширины.

em является ширина капитала м (M), поэтому 12 тех будет ширина 12 EMS, или ширина: мммммммммммм

100vw - 12em Таким образом, ширина минус двенадцать М х. Если этот пост имел ширину зрения, то это было бы что-то вроде:

/from here               to here \ 

MMMMMM------------------------------------------------------------------------------MMMMMM

.333 этого вокруг 1/3, так что бы одна треть выше ширины.Таким образом, эта ширина будет выглядеть примерно так:

/from here  to here \      /or from here to here \ 

MMMMMM------------------------------------------------------------------------------MMMMMM

Answer 2

Ну, это означает почти одну треть (0,33 ...) (на сто процентов от ширины видового экрана минус 12 м).

Предположим, мы добавили боковую панель 12em к нашей схеме с 3 колонками. Мы бы настроить атрибут наших размеров, как так ...

Таким образом, по-видимому, он имеет компоновку три столбца (отсюда 0,33 ... одна трети), и он хочет, чтобы освободить место для широкого колонка 12em. Поэтому он берет это из calc()

Надеюсь, вы получили его сейчас.

Answer 3

Я хотел проверить размеры CSS с JS, вы можете полностью понять, как работает соотношение между величинами и единицами.

var samp = document.getElementById('samp'); 
 
var myForm = document.getElementById('myForm'); 
 
var output = document.getElementById('output'); 
 

 
myForm.addEventListener('input', function(event){ 
 
    var t = event.target; 
 
    t.nextElementSibling.innerHTML = t.value + t.getAttribute('data-unit'); 
 
    setWidth(); 
 
}); 
 

 
window.onload = function(){ 
 
\t setWidth(); 
 
}; 
 

 
function setWidth(){ 
 
    var el = myForm.elements; 
 
\t var sheet = document.styleSheets[0]; 
 
\t var lnh = sheet.cssRules.length; 
 
    var sel = "width: calc(" + el[1].value + " * (" + el[2].value + "vw - " + el[3].value + "em))"; 
 
    
 
\t sheet.insertRule("#samp {"+sel+"}", lnh); 
 
    output.innerHTML = sel; 
 
}

input[type='range'] { 
 
    width: 60%; 
 
} 
 

 
p { 
 
    margin:0; 
 
    font-family:monospace; 
 
} 
 

 
#samp { 
 
    background-color:#33aaff; 
 
    height:40px; 
 
    margin-top:10px; 
 
}

<form action="" id="myForm"> 
 
    <fieldset> 
 
    <label> 
 
     <input type="range" value=".333" min=".1" max="1" step=".001" data-unit=""> 
 
     <span>.333</span> 
 
    </label> 
 
    <label> 
 
     <input type="range" value="100" min="1" max="100" step="1" data-unit="vw"> 
 
     <span>100vw</span> 
 
    </label> 
 
    <label> 
 
     <input type="range" value="12" min="0" max="50" step=".2" data-unit="em"> 
 
     <span>12em</span> 
 
    </label> 
 
    </fieldset> 
 
    <fieldset> 
 
    <p id="output"></p> 
 
    </fieldset> 
 
</form> 
 

 

 
<div id="samp"></div>