私は擬似クラスがグループ化機能を作ろうとしているテンプレートを作成しますが、スクリーンサイズを変更するとピクセル化してしまいます。私はそれを見てすべきかの画像が表示されますhtmlの機能をグループ化したテンプルを作成する
唯一の問題はresponsivnessである
フィドル:https://jsfiddle.net/t93v93cn/
コードがある
CSS<div class="grouping-container">
<span class="groupBadge"><h4>Group1</h4></span>
<div class="headingContainer">
<h1>Heading 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div class="heading-container">
<h1>Heading 2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
HTML
以下.grouping-container{
position:relative;
width:100%;
max-width: 70%;
margin: 30px auto;
padding: 15px 15px 50px 15px;
box-sizing: border-box;
background: #ccc;
}
.headingContainer,.heading-container{
width: 90%;
max-width: 85%;
margin: 5px auto;
background: rgba(35, 122, 197, 0.4);
padding: 5px 25px 50px 25px
}
.headingContainer p,.heading-container p{
font-size: 25px;
}
.headingContainer:before{
content: "";
border-top: 1px solid red;
padding: 0 25px;
position: absolute;
left: 34px;
margin-top: -6px;
}
.heading-container:before{
content: "";
border-bottom: 1px solid red;
padding: 0 24px;
position: absolute;
left: 33px;
bottom: 55px;
}
.groupBadge{
width: 108px;
height: 30px;
padding: 18px 120px;
display: inline-block;
background: #7ecaca;
transform: rotate(90deg);
position: absolute;
bottom: 43%;
left: -217px;
}
.groupBadge:before{
content: "";
position: absolute;
padding: 5px 105px;
border-top: 1px solid red;
left: 100%;
}
.groupBadge:after{
content: "";
position: absolute;
padding: 5px 105px;
color: red;
border-top: 1px solid red;
right: 100%;
bottom: 7px;
}
.groupBadge h4{
margin-top: -10px;
transform: rotate(180deg);
padding-right: 36px;
}
、デフォルトで比率は、HTMLでのグループ化については、ハード持っているzer00ne @ – zer00ne
を1EMするに16pxです。あなたが気にしないならば、あなたはappericiatedされるフィドルを更新してください。 –
いいえ、グループ化は特にHTMLやCSS AFAIKに関連付けられているもののようには聞こえません。あまりにも多くのコードがありますが、pxをemに変換するのは冗長ですが単純な作業です。 px測定値がある場合は、その数値を16で割ってください。 – zer00ne