Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 30.07.2016, 00:56   #1
Bikalexander
Новичок
Джуниор
 
Регистрация: 19.02.2009
Сообщений: 2
По умолчанию Адоптация шрифта -> VW

Вечер добрый,

ребят, блин ну не как не освою этот css, сделал сейчас как смог, но работает плохо. Помогите пож.

Что нужно?

1. Размер шрифта должен адоптироваться автоматом к размеру дисплея/окна.
2. Слева нужны переключатели языка

Пример как должно быть:
http://nicolasjaar.net

С чем не могу справится?
1. На мобильнике (Андроид, бруазер хроме) текст не полностью видно с переключателями языка в режиме портрет
2. Размер шрифта на некоторых экранах не полностью заполняет окно

Вот мой актуальный вариант:

Код:
<!DOCTYPE html><html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&amp;subset=latin,latin-ext,cyrillic,cyrillic-ext" type="text/css">
<style>
div {  font-size: 3.0vw;  width: 100vw;  float: right;padding-right: 8%; }

div p {  text-align: right;
text-transform: uppercase;
font-family: Open Sans;
font-style:italic;
}


a:link {
    text-decoration: none;
color: black;
}

a:visited {
    text-decoration: none;
color: black;
}

a:hover {
    text-decoration: none;
color: black;
}

a:active {
    text-decoration: none;
color: black;
}

</style>
</head>
<body>

<div>

<p>
<span style="padding-right:40%;"><a   href="http://xxx.ru" ><img src="Russian_Federation-48.png" width="48" ></a> <a   href="http://xxx.ru/en" ><img src="Great_Britain-24.png" width="48" ></a></span>
<a href="xxxxx.ru" target="_blank">Мы находимся тут.</a><br>
<a href="http://u-xxxx.ru" >xxxxxx.</a><br>
<a href="https://www.xxxxx.com">xxxxxxx.</a><br>
<a href="http://dxxxxx.com" >Delicate xxxxx.</a><br>
<a href="https://xxxxx.com" >ххххххххх.</a><br>
<a href="https://goo.gl/xxxxx">Ху из xxxxxx?*</a><br>
<a href="mailto:hr@xxx.ru">Пишите, если хотите помочь нам расти.</a><br>
<a href="mailto:sale@xxx.ru">Пишите, если хотите помочь себе расти.</a><br>
<a href="mailto:info@xxx.ru">Пишите.</a></p>

</div>


</body></html>
Спасибо.
Bikalexander вне форума Ответить с цитированием
Старый 31.07.2016, 13:19   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

По дефолту отображение страницы будет показывать витуально 1024px по горизонтали, при этом текст будет адаптироваться в зависимости от настроек девайса. Чтобы полностью управлять адаптивкой, надо прописать мета-настройки в head:
Код:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
и
Код:
font-size: 3.0vw;
не очень хорошая идея, лучше использовать media-query и для разных диапазонов размеров расставить свои размеры шрифта. Ты же не хочешь, чтобы на 1920 сайт растягивался конским шрифтом как на мобильник?
Такой подход хорош для презентаций, когда необходимо все показывать в одинаковых пропорциях.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение шрифта Obey177 Microsoft Office Excel 5 04.09.2012 21:33
размер шрифта varelik Общие вопросы Delphi 10 16.09.2009 13:58
Добавление шрифта Ntlegend Общие вопросы Delphi 3 28.03.2009 01:15
Настройка шрифта Vladya Помощь студентам 2 16.11.2008 20:41
Размер шрифта Gorychev HTML и CSS 6 25.05.2008 11:42