タグ

2012年6月2日のブックマーク (2件)

  • レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い

    デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値(10.5pxとか9.2pxなど)に対するブラウザの挙動です。 たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル(小数点以下のピクセル値)の扱いの挙動差により生まれます。 まずはパーセント指定の基から まずは前提となるパーセント指定の際の計算の基のおさらいから。。。 CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。 たとえば100pxの親要素の中にある子

    レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い
    saz_go
    saz_go 2012/06/02
  • Google ChromeでiPhoneとかのtouch系イベントをエミュレートできるようになってた。これは便利。 | Ginpen.com

    右上User Agentのところね。Emulate touch eventsにチェックを入れると、マウスのクリックやドラッグ&ドロップでtouchstart, touchmove, touchendが発火するようになる。 開発時にいちいち実機やXcodeのエミュレーターを用意しなくても動作確認できるようになるのはとても便利。さすがにマルチタッチはできないけど、とりあえずエラーが出てないとかそういう確認ならできる。 ついでに隣の項目のOverrride User AgentでiPhoneiPadを選ぶとなお良さそう。(ちなみにIEとかも指定できます。もちろんエミュレートはないけどね。) 画面サイズは、それを指定値に変更できるプラグインがあるから、探してみてください。 Settingsの項目は、なんか気がついたら(Chromeが更新されてて)変わってるから、ときどき覗いてみるといいんじゃない

    Google ChromeでiPhoneとかのtouch系イベントをエミュレートできるようになってた。これは便利。 | Ginpen.com
    saz_go
    saz_go 2012/06/02