2014-10-08 8 views
2

Я стараюсь адаптировать дизайн.размер шрифта становится меньше при изменении ориентации

http://quirktools.com/screenfly/#u=http%3A//rus-turk.com/newyln/en.html%23secondPage&w=320&h=480&a=33&s=1

font-size кажущегося OK, если нажать любую ссылку или перезагрузить страницу, но становится все меньше с изменением ориентации.

также не фиксируется с помощью ctrl + zoom.

Я загрузил такие

@font-face { 
    font-family: 'Easy'; 
    src: url('fonts/Easy.eot'); 
    src: url('fonts/Easy.eot?#iefix') format('embedded-opentype'), 
    url('/fonts/Easy.woff') format('woff'), 
    url('/fonts/Easy.ttf') format('truetype'), 
    url('/fonts/Easy.svg#arbat') format('svg'); 
    font-weight: normal; 
    font-style: normal;} 

@media only screen and (min-width: 320px) and (max-width: 479px) and (orientation:portrait) { 

    .container { 
position: relative; 
width: 100%; 
margin: 0 auto; 
height: 480px; 
padding: 0; 
overflow: hidden; } 
    .container .columns { 
float: left; display: inline; margin-left: 0; margin-right: 12%; } 
    .row           
{ margin-bottom: -10px; } 
    .container .eight.columns { 
width: 300px; 
margin-bottom: -12%; 
margin-left: -3%; 
padding-top: 12%; 
} 

#stars1, #texttwo, #texttre, #textfour, #textfive, #textsix, #stars2, #texttwotwo, #texttwotre, #texttwofour,#texttwofive, #texttwosix, #stars3, #texttretwo, #texttretre, #texttrefour, #texttrefive, #texttresix, #texttreseven, #texttreeight , #stars4, #textfourtwo, #textfourtre, #textfourfour, #textfourfive, #textfoursix, #textfourseven, #textfoureight, #stars5, #textfivetwo, #textfivetre, #textfivefour, #textfivefive, #textfivesix { 
    font-family: "Easy"; 
    white-space: pre; 
    max-width: 320px; 
    margin-bottom: -10px; 
font-size: 2em; 
color: rgba(225,207,189,0.5); 
position: relative; 
text-align:center; 
z-index: 5; 
    opacity:0; 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); 
} 
} 

Есть ли решение?

+0

Вы пробовали посмотреть, можете ли вы воспроизвести его в Ревизионном дизайне Firefox (crtl-shift-M)? – amphetamachine

+0

Вы только добавили css информацию о семействе шрифтов, которые используете - ничего о размерах шрифта или размерах экрана. См. Инструкции по [как создать минимальный, полный, проверяемый пример] (http://stackoverflow.com/help/mcve). –

+0

Я пробовал отзывчивый дизайн браузера Firefox, он показывает эту проблему. Я добавил часть кода с размером шрифта и размером экрана. Надежда на помощь) – svt

ответ

0

Проблема решена. Единственное, что мне было нужно, чтобы изменить их, чтобы было нужно.

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