Отзывчивый дизайн не работает для текста

Я хочу сделать отзывчивый дизайн для своей страницы, я сделал макет, и он отлично работает при изменении размера, но когда я добавляю текст на свою страницу, а затем меняю его размер, все становится бесполезным. Это связано с тем, что макет самостоятельно изменяет размер, но текст не изменяет размер. Как это будет разрешено?Отзывчивый дизайн не работает для текста

Вот HTML код:

<body> 

<div id="mainpage"> 

<div id="menu"> 
<div id="menuhomepage"><a href="#"></a></div> 
<div id="menublog"><a href="#"></a></div> 
<div id="menuphoto"><a href="#"></a></div> 
<div id="menuabout"><a href="#"></a></div> 
<div id="menulinks"><a href="#"></a></div> 
<div id="menucontact"><a href="#"></a></div> 
</div> 

<div id="header"> 
<div id="headertext"><a href="#">logologo</a></div> 
</div> 

<div id="content"> 

<div id="articles"></div> 

<div id="sidebar"> 
<div id="searchbar"></div> 
<div id="tempus"></div> 
<div id="categories"></div> 
<div id="blogroll"></div> 
<div id="archieve"></div> 
</div> 

</div> 

</div> 

<div id="footer"></div> 
</body>

И здесь идет код CSS:

body 
{ 
    background-image: url(images/background.jpg); 
    min-height: 1000px; 
    background-repeat: repeat-x; 
    background-color: #DBE2D0; 
    width: 100%; 
    margin: 0%; 
    font-size: 100%; 
    min-width: 150px; 
} 

#mainpage 
{ 
    width: 80%; 
    min-height: 900px; 
    margin-left: 10%; 
} 

#menu 
{ 
    width: 100%; 
    height: 60px; 
} 

#menuhomepage 
{ 
    background-color: #5D7144; 
    width: 30%; 
    height: 60px; 
    float:left; 
} 

#menuhomepage a 
{ 
    text-decoration: none; 
    color: White; 
    margin-left: 60%; 
    margin-bottom: 10px; 
} 

#menublog 
{ 
    background-color: #5D7144; 
    width: 10%; 
    height: 60px; 
    margin-left: 0.1%; 
    float: left; 
} 

#menuphoto 
{ 
    background-color: #5D7144; 
    width: 15%; 
    height: 60px; 
    margin-left: 0.1%; 
    float: left; 
} 

#menuabout 
{ background-color: #5D7144; 
    width: 10%; 
    height: 60px; 
    margin-left: 0.1%; 
    float: left; 
} 

#menulinks 
{ 
    background-color: #5D7144; 
    width: 10%; 
    height: 60px; 
    margin-left: 0.1%; 
    float: left; 
} 

#menucontact 
{ 
    background-color: #5D7144; 
    width: 24.5%; 
    height: 60px; 
    margin-left: 0.1%; 
    float: left; 
} 

#header 
{ 
    height: 170px; 
} 

#header a 
{ 
    text-decoration: none; 
    font-size: 40pt; 
    color: White; 
} 

#headertext 
{ 
    padding-left: 40%; 
    padding-top: 5%; 
} 

#content 
{ 
    background-color: White; 
    min-height: 1600px; 
} 

#articles 
{ 
    width: 60%; 
    border: 2px solid Gray; 
    min-height: 1400px; 
    margin-left: 5%; 
    margin-top: 50px; 
    float: left; 
} 

#sidebar 
{ 
    width: 25%; 
    border: 2px solid Gray; 
    min-height: 1400px; 
    margin-left: 5%; 
    margin-top: 50px; 
    float: left; 
} 

#searchbar 
{ 
    width: 96%; 
    border: 2px solid Gray; 
    min-height: 150px; 
    margin-left: 1%; 
    margin-right: 1%; 
    margin-top: 10px; 
    float: left; 
} 

#tempus 
{ 
    width: 96%; 
    border: 2px solid Gray; 
    min-height: 100px; 
    margin-left: 1%; 
    margin-right: 1%; 
    margin-top: 30px; 
    float: left; 
} 

#categories 
{ 
    width: 96%; 
    border: 2px solid Gray; 
    min-height: 350px; 
    margin-left: 1%; 
    margin-right: 1%; 
    margin-top: 10px; 
    float: left; 
} 

#blogroll 
{ 
    width: 96%; 
    border: 2px solid Gray; 
    min-height: 350px; 
    margin-left: 1%; 
    margin-right: 1%; 
    margin-top: 10px; 
    float: left; 
} 

#archieve 
{ 
    width: 96%; 
    border: 2px solid Gray; 
    min-height: 350px; 
    margin-left: 1%; 
    margin-right: 1%; 
    margin-top: 10px; 
    float: left; 
} 

#footer 
{ 
    background-image: url(images/footer.png); 
    width: 100%; 
    height: 200px; 
    margin-top: 50px; 
    margin-left: 0px; 
}

Проверьте jsfiddle код здесь: http://jsfiddle.net/2NNNy/

При добавлении в "logologo" текст и изменение размера, размер шрифта не изменяется, почему?

источник

2013-06-07 Aayushi Jain

скрипка не входит. – karthikr

Что заставляет вас думать, что он должен изменить размер кода? –

Это должно работать, надеюсь, что это помогает

@media screen and (max-width: 320px) { /* for screen size less or equal to 320px*/ 
    #header a{ 
     font-size: 80%; /*Changes as per your requirement*/ 
    }  
} 

@media screen and (max-width: 700px) { /* for screen size less or equal to 700px*/ 
#header a{ 
    font-size: 120%; /*Changes as per your requirement*/ 
} 
}

и включить это в вашей голове тега

<meta name="viewport" content="width=device-width, initial-scale=1.0">

источник

2013-06-07 17:19:22 sajay

Я написал это в своем файле CSS, но что написать в моем файле HTML, чтобы связать этот стиль CSS с ним? –

добавить код выше в разделе головы – sajay

Работает отлично. Большое спасибо. –

Жидкие макеты в одиночку просто сделано сократить его больше ...

Вы будете хотеть, чтобы вникать в mediaqueries, чтобы получить эффект, который вы хотите.

Вот несколько хороших примеров. Посмотрите на источник!

http://mediaqueri.es/

Кроме того, вы можете попробовать это руководство для разработчиков ...

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media (min-width: 700px) { 
    font-size: 75%; 
} 

@media (min-width: 500px) { 
    font-size: 50%; 
}

источник

2013-06-07 16:24:25

Спасибо за ссылки. Я искал их. –

Всегда используйте процент для размера шрифта и не забудьте добавить окна просмотра meta в заголовке страницы

Пусть ваше тело размер шрифта составляет 100%, по умолчанию размер шрифта будет 16px, и если вы хотите применить 13px для абзаца можно легко вычислить, как этот

13/16 т.е. 81%, довольно просто да,

счастливым кодирования :)

источник

2013-06-07 16:30:35 sajay

Но это не решит мою проблему, так как размер шрифта по умолчанию всегда будет 16 пикселей, и, таким образом, мой текст будет отображаться соответствующим образом, в то время как я хочу изменить его размер при изменении размера браузера. –

Итак, вы дали фиксированный 40pt, сделайте это в процентах и примените разный размер шрифта для разных точек прерывания мультимедиа – sajay

Да, это то, что я пытаюсь сделать, но я не могу понять синтаксис медиапроса. Я знаю о контрольных точках, но не знаю, как связать HTMl и CSS для мультимедийных запросов. Можете ли вы сказать мне, что именно писать в файле HTML и файле CSS. –

Отзывчивый дизайн не работает для текста

ответ

Смежные вопросы