【重要】サービス終了のお知らせ

perfont

design_peke

License: MIT License

Fork
0
Fav
0
View
647
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 44 lines
  • HTML 2 lines
  • CSS 27 lines

もとのフォントサイズとウインドウサイズの比率をベースに
ウインドウの可変にあわせてサイズをリキッドさせる。
レスポンシブで、デバイステキストを使いたいけど、デザイン崩したくない時などに。

【更新履歴】

2017.1.16 フォントサイズはcss設定を参照する方式に戻しました。
パラーメータはbeaseWidthとbreakPoiintとしました。

2016.12.22 使いやすいように、ブレイクポイントと、PC/MOBILEそれぞれのモードでのフォントサイズを指定できるように仕様変更。
スマホモードでの表示サイズは、フォントサイズ/ブレイクポイントになります。
※最低サイズを越えて縮小はしないようです。



■html
<p class="perfont">テキスト</p>



■css
@media only screen and (min-width: 768px) {
.perfont{
font-size:13px;
}
}
@media only screen and (max-width: 767px) {
.perfont{
font-size:24px;
}
}


■JS記述例

なにも指定しない場合は
ベース幅は320、
ブレイクポイントは768です。
$(".perfont").each(function(){
$(this).perfont();
})


値を変えたい場合は、パラメータで指定します。

$(function(){
$(".perfont").each(function(){
$(this).perfont({
beaseWidth:320,
breakPoiint:768
});
})
})
  • perfont
  • jQuery v2.1.0
  • perfont

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

design_peke

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags