hello foo bar Saba notejQueryのモーダルプラグイン Remodalの使い方
Tag responsiveを表示しています。
2017.3.23 木
これいいですよ。 – Remodal – GitHub Remodalの入手 Githubからもってくるのが一番手っ取り早いかと思います。GitHub ダウンロードしたらREADMEなどいろいろなファイルが入っていますがミニマムで使うのは以下の2ファイルになります。 Remodal-master/src/remodal.css Remodal-master/dist/remodal.min.js (または、Remodal-master/src/remodal.js) 自分でデザインとかこだわらない人は、以下のテーマも読み込んでしまいましょう。 Remodal-master/src/remodal-default-theme.css 設定 まずはファイルを適当なところで...
2016.7.25 月
タブレットで見たとき右側が切れたりするときに使うやつ。結構便利。 PCとスマホとタブレットと3つのデザインを作るのが非常に面倒なので、タブレットのデザインをそのままPCのデザインで代用できます。 <script> var ua = navigator.userAgent; if(ua.indexOf('iPad') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') < 0)) { // タブレット document.write('<meta name="viewport" content="width=[PCの幅],user-scalable=no">'); }else...
2016.3.7 月
Device width PC 769px iPad 641px – 768px iPhone 320px – 640px CSS1個でやるときにはこんな感じ。 @media screen and (min-width:769px) { .... } @media screen and (min-width:641px) and (max-width: 768px) { .... } @media screen and (min-width:320px) and (max-width: 640px) { .... } CSSをわけるのだったら、こういう感じ。 @import url("https://saba.omnioo.com/assets/css/base.cs...
2016.3.6 日
アクセス時のbody幅とWindowを動的に伸び縮みさせたときのbody幅を取得します。これ使うとレスポンシブ対応のWEBデザインに比較的柔軟に対応できます。 静的には$(window).width()でそのまま取得できるのですが、動的にはこのままではダメでsetTimeout()を使って幅を取得するってところが面倒なのです。 $(function(){ // Window width default var egwidth = $(window).width(); console.log(egwidth); if (egwidth <= 640) { alert("スマホで見ている。"); } else if (egwidth > 640) { alert("PCで見ている。"...