Как сделать резиновый текст?

[ivashka.vvs]

Не пинайте что в этой теме пишу, а как на html сверстать блок для youtube видео чтобы он и соответственно видео, уменьшался в зависимости от разрешения экрана?

 

[Trusteg]

Не пинайте что в этой теме пишу, а как на html сверстать блок для youtube видео чтобы он и соответственно видео, уменьшался в зависимости от разрешения экрана?

HTML:

<div class="youtube_box"><iframe width="100%" height="100%" src="//www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe></div>

CSS:

.youtube_box {height:300px;width:550px}
 
@media screen and (max-width: 1280px) {
    .youtube_box {height:200px;width:366px}
}

При ширине экрана меньше 1280 пикселей ширина блока станет 200 пикселей, а высота 366

 

[ivashka.vvs]

Спасибос! То есть так же и для всех экранов можно прописать размеры в ЦСС ?
только будет :

@media screen and (max-width: 1280px) {
    .youtube_box {height:200px;width:366px}
@media screen and (max-width: 1024px) {
    .youtube_box {height:400px;width:270px}
@media screen and (max-width: 800px) {
    .youtube_box {height:100px;width:166px}

Так?

 

[Trusteg]

Спасибос! То есть так же и для всех экранов можно прописать размеры в ЦСС ?
только будет :

@media screen and (max-width: 1280px) {
    .youtube_box {height:200px;width:366px}
@media screen and (max-width: 1024px) {
    .youtube_box {height:400px;width:270px}
@media screen and (max-width: 800px) {
    .youtube_box {height:100px;width:166px}

Так?

да примерно так, только фигурную скобку } не забывайте ставить после каждого @media

 

[aaliseyko]

Спасибос! То есть так же и для всех экранов можно прописать размеры в ЦСС ?
только будет :

@media screen and (max-width: 1280px) {
    .youtube_box {height:200px;width:366px}
@media screen and (max-width: 1024px) {
    .youtube_box {height:400px;width:270px}
@media screen and (max-width: 800px) {
    .youtube_box {height:100px;width:166px}

Так?

а что будет если ширина больше 1280?
Нужна обработка

@media screen and (min-width: 1281px) {}

И для остальных не пограничных лучше указать интервалы полностью,а не screen. То есть не только max, но и min. Типа:

@media (min-width: 1025px) and (max-width: 1280px) {}

Иначе могут быть конфликты.

 

[archi07]

На Java - скачать jquery.fittext.js Нужно указать минимальный размер шрифта и максимальный (здесь - 16px и 40px соответственно)

<script src="/jquery.fittext.js"></script>
<script type="text/javascript">
        $(".DIV или #DIV").fitText(2, { minFontSize: '16px', maxFontSize: '40px' });
    </script>

 

[dukeeee]

<script> function resize() { var width = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth)) var tt = document.getElementById('text') if (width < 1024) tt.className = 'mintext' else tt.className = 'maxtext'