画面の大きさにしたがって文字サイズを調整するUserCSS
porterはiPadアプリがない。けど、キーボード使うためにはporterが必要。ということで、iPadでもporterを使っていくことに。
画面の幅に応じて横幅を調整するようにして、iPadでも文字の大きさが大きくなりすぎず、iPhoneとiPadの両方でいい感じに表示してくれるようにした。
ランドスケープモードになると横幅が変わるので、ランドスケープのときは別に大きさを調整するように。
UserCSS.icon
code:style.css
.line.line-title .text {
font-weight: 550;
line-height: 1.5em;
font-size: 3.6vw;
}
.line {
line-height: 1.7em;
//font-size: 14px;
font-size: 3.4vw;
}
.related-page-list .grid .page-list-item .content .title {
font-size: 3.4vw;
font-weight: 400;
}
.related-page-list .grid .page-list-item .description {
font-size: 3.4vw;
font-weight: 400;
}
.grid li.page-list-item a .content .description{
height: 100%;
font-size: 3.4vw;
line-height: 1.7em;
}
.grid li.page-list-item a .content .title {
//height: 100%;
font-size: 3.4vw;
font-weight: 550;
line-height: 1.7em;
}
.line .indent-mark .dot {
top: 60%;
width: 45%;
height: 30%;
}
@media screen and (orientation: landscape) {
/* 横向きの場合のスタイル */
.line.line-title .text {
font-weight: 550;
line-height: 1.5em;
font-size: 2.1vw;
}
.line {
line-height: 1.7em;
//font-size: 14px;
font-size: 2vw;
}
.related-page-list .grid .page-list-item .content .title {
font-size: 2vw;
font-weight: 400;
}
.related-page-list .grid .page-list-item .description {
font-size: 2vw;
font-weight: 400;
}
.grid li.page-list-item a .content .description{
height: 100%;
font-size: 2vw;
line-height: 1.7em;
}
.grid li.page-list-item a .content .title {
//height: 100%;
font-size: 2vw;
font-weight: 550;
line-height: 1.7em;
}
.line .indent-mark .dot {
top: 60%;
width: 45%;
height: 30%;
}
}