Question

想知道是否有人可以提供帮助。

我是一名初学者，正在学习网站开发，并为特定项目一直在玩不同的风格。我正在尝试的那个有一个背景颜色，在这之上是一个60％宽度的中央包装，其中包含所有的网站gumph。在包装器的两侧，我的文本转为90/270，使用网站名称向下运行包装器。

当我调整网站大小时，文本跳转，如何让文本保持原始位置？还有一个第二个问题，我在CSS中把它作为％的文字，但它似乎没有调整屏幕大小，即使我试试em，这里是css：

*{
                                                                        background-color:#085C08;
max-width:100%;   
    max-height:100%;   
    min-width:200px;     
    margin:0 auto;
    }

.wrapper{
    width: 60%;    
    background-color: #FDF3EC;    
    margin:0 auto;    
    margin-top:-1%;    
    margin-bottom:-1.5%;     
    }

.artwork-r{
    transform:rotate(90deg);   
    white-space:nowrap;   
    transform-origin:bottom;   
    margin-top:-52.5%;    
    margin-left:78.65%;   
    position:absolute;    
    width:0%;    
    height:0%;    
    clear:both;        
    }

.artwork-r p{
    padding:0%;     
    font-size:490%;    
    font-family:Verdana, Geneva, Tahoma, sans-serif;     
    color:#FDF3EC;     
    }

.artwork-l{
    transform:rotate(270deg);     
    white-space:nowrap;    
    transform-origin:top left;    
    margin-left:15.1%;    
    margin-top:0.4%;    
    position:absolute;      
    width:0%;     
    height:0%;     
    clear:both;      
    }

.artwork-l p{
    padding:0%;     
    font-size:490%;     
    font-family:Verdana, Geneva, Tahoma, sans-serif;     
    color:#FDF3EC;     
    }

Answer 1

在定位文字时，请勿使用margin-left或margin-top，这些内容会随着屏幕尺寸的变化而变化。您应该使用top，bottom，left和/或right。

对于字体大小，em和％都是基于屏幕大小的 NOT ，而是它的父级字体大小。如果没有看到您的标记我不是100％肯定，但您可能希望将.artwork-l的位置设置为right: 100%;

调整旋转css的项目的大小

1 个答案: