使设计移动和不同的分辨率兼容[关闭]答案

【问题标题】：Make a design mobile and different resolution compatible [closed]使设计移动和不同的分辨率兼容[关闭]
【发布时间】：2013-01-17 00:22:30
【问题描述】：

我创建了一个在中间被对角垂直线分割的设计。它的每一侧都有文本，无论使用哪个设备查看它，我都希望垂直和水平居中。设计一侧为黑色，另一侧为白色，因此，文本颜色也需要更改。我无法弄清楚如何使其适应文本始终垂直居中的不同分辨率和设备。如果我能弄清楚如何使它工作，我愿意使用 jQuery 或将其转换为图像。

http://jsfiddle.net/dw4Cj/7/

------------------------HTML--------

<div id="wrapper">
   <div id="right"></div>
    <div class="content" id="left-content">
        <h1> Designer </h1>
    </div>
    <div class="content" id="right-content">         
        <h1> Developer </h1>
    </div>
 </div>

----------CSS-------------------------

#right {
     background: none repeat scroll 0 0 rgba(0,0,0,1);
     height: 10000px;
     left: -851px;
     position: fixed;
     top: -150px;
     transition: all 0.5s ease-in-out 0s;
     transform: rotate(10deg);
     -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
     -o-transform: rotate(10deg);
     -ms-transform: rotate(10deg);
     width: 710px;
}

#right-content {
     position: fixed;
     margin: 0 0 0 703px;
     top: 40px;
}

#left-content {
    color: white;
    position: fixed;
    text-align: right;
    top: 40px;
    width: 574px;
}

.content {
    padding-top: 260px;
}

 #left {
     float: right;
     margin-right: 40px;
 }

【问题讨论】：

你应该用百分比来定义一切。
如果你看一下这个特殊的设计，你会发现让它这样工作非常困难。

标签： jquery html css fluid-layout

【解决方案1】：

您可以使用渐变来创建背景，我在这里为您创建了一个示例：

/* HTML */
<body>
    <p class="center-vertical">Designer <span class="black">Developer</span></p>
</body>


/* CSS */
body, html {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
background-image: -webkit-linear-gradient(-15deg, #000 50%, #fff 50%, #fff 100%);
background-image: -moz-linear-gradient(-15deg, #000 50%, #fff 50%, #fff 100%);
background-image: -linear-gradient(-15deg, #000 50%, #fff 50%, #fff 100%);
}

p {
text-align: center;
font-size: 30px;
color: #fff;
word-spacing: 80px;
}

.black {
color: #000;
}

/* JS */
$(document).ready(function(e) {

var centerVerticaly = function() {
    var marginTop = $('body').height() / 2;

        $('.center-vertical').css({
            marginTop: marginTop
        });
};

    $(window).bind("load resize", function(){
        centerVerticaly();
    });

    centerVerticaly();

});

http://jsfiddle.net/LFGGV/

它缺少您发布的 jsfiddle 中间的阴影，但您可以通过在渐变中添加更多断点来创建它。

我确实选择在 jQuery 的帮助下使文本居中，可能有更好的方法来做到这一点，但它确实有效。

【讨论】：

哇！谢谢你！这个解决方案有效！
我对这个功能不是很熟悉 - 你能告诉我如何添加阴影吗？
我这样做了：背景图像：-moz-linear-gradient(-15deg, #000 49.3%, #7d7d7d 1%, #fff 49.7%, #fff 100%);