背景画像だけを置いているんだけど、レスポンシブに対応したいとき

テキストを飛ばして背景画像を置きたいときは多々ある。
ロゴ周りとか、デザインされたテキスト部分とか。

responsiveに対応するにはどうすればいいんだろーって分からなくて、
今までは諦めて画像を直接配置してwidth:100%,height:auto;でやっておりました。

でも考えてみたら、比率を変えないんだから以下のように対応できますよね。
例)
画像のサイズが600px × 400pxだとしたら

div.logo{
text-indext系;好み分かれるので詳細書かず
background:url(xxx) no-repeat center top;
back-ground:cover;
max-width:600px;
padding-top:66.66666666%;  /* 400px/600px = 0.66666666… */
}

こんな感じでいけちゃうっぽいです。

外部JSを読み込むときにどうしてもdocument.writeで読み込まなければならないけどうまくいかないとき

まず、タイトルが長い。
タイトル通りだが、サイトの作りによってはクライアントの要望によってPCに偏ったアニメーションごりごりのサイトを作る場合がある。

サイト全体としてResponsiveで作る前提なのでviewportでJSを分けるのも負荷が高いので、CSSとJSをUserAgentで分けてしまおうと。

その時点でResponsiveじゃないというのは言わないでおきます。

普通に考えて、以下のように設定するかと思われる。
<script>
document.write(‘<link href=”○○○.css” rel=”***” type=”***” /> ‘);
document.write(‘<script src=”○○○.css” ></script> ‘);
</script>

でもこれだとCSSの方は上手くいくけど、JSの方だけなぜか’);が無視されて変なところまでwriteしにいく。

ブラウザのバグらしく、解決策は簡単。

document.write(‘<script src=”○○○.css” ></scri’ + ‘pt> ‘);

と分けちゃえば大丈夫みたい。

若干ハマりました。
以下、参考にさせていただいたサイト。ありがとうございました!

http://vip-audio.jugem.jp/?eid=87