Question

我正在尝试响应式设计。

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

font-size似乎可以推送任何链接或重新加载页面，但随着方向更改而变小。

也没有用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);
}
}

有没有解决方案？

Answer 1

问题解决了。将em改为rem是我唯一需要的东西。

方向更改时字体大小变小

1 个答案: