scss レスポンシブ:テキストエリア固定,イメージエリア伸缩 Posted 2021-05-17
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss レスポンシブ:テキストエリア固定,イメージエリア伸缩相关的知识,希望对你有一定的参考价值。
レスポンシブ:テキストエリア固定、イメージエリア伸縮
--------------------------
A [Pen](https://codepen.io/anonie/pen/PoYjWmV) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).
[License](https://codepen.io/anonie/pen/PoYjWmV/license).
<div class="inner flex items">
<div class="item01">
item01
</div>
<div class="item02">
item02
</div>
</div>
<div class="inner flex items">
<div class="item03">
item03
</div>
<div class="item04">
item04
</div>
</div>
*, *::before, *::after { box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
width: 900px;
margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem 0;} // 視認性用
.items {
position: relative;
}
.item01, .item03 { // 視認性用
border: 3px solid #aaa;
}
.item02, .item04 { // 視認性用
border: 3px solid #ccc;
}
.inner {
width: calc( 100% - 200px );
max-width: 1480px;
@media screen and ( max-width: 767px ) {
width: 84%;
max-width: 100%;
}
}
.item01 {
z-index: 10;
position: relative;
width: 300px;
height: 200px;
@media screen and ( max-width: 767px ) {
margin-top: 200px;
width: 100%;
}
}
.item02 {
position: absolute;
right: 0;
width: calc( 100% - 300px - 50px );
// width: 100%;
// max-width: ( 1480px - ( 300px + 100px + 100px ) );
height: 200px;
@media screen and ( max-width: 767px ) {
width: 100%;
}
}
.item03 {
position: absolute;
left: -60px;
width: calc( 100% - 300px - 50px + 60px );
// width: 100%;
// max-width: ( 1480px - ( 300px + 100px + 100px ) );
height: 200px;
@media screen and ( max-width: 767px ) {
left: 0;
width: 100%;
}
}
.item04 {
position: relative;
width: 300px;
height: 200px;
margin-left: auto;
@media screen and ( max-width: 767px ) {
margin-top: 200px;
width: 100%;
}
}
以上是关于scss レスポンシブ:テキストエリア固定,イメージエリア伸缩的主要内容,如果未能解决你的问题,请参考以下文章
scss レスポンシブテーブル
scss レスポンシブ:延胡索リストを横并びに
html クリックすると全选択されるテキストエリア。
javascript レスポンシブチェッカー
markdown レスポンシブ,カラム,インナー
html レスポンシブ対応したテーブルデザイン(スクロール版)