どのデバイスでも同じような見た目になればなんでもええ！
場合によって使い分けてるけど主流はpxだと思う。
fontは文字をロゴっぽく画像みたいに扱いたい部分はvw使います。それ以外はrem。たいていレスポンシブ前提だから、画面をresizeしていったときに細かく指定しなくてもいいように最近vwなど相対的な幅を指定することが多い。主流はわからないな。他人のソース見るとみんな場所によって使い分けてる印象。
Re:2 コメントありがとうございます。おっしゃる通りなのですが、iPhone8とiPhone8plusといった解像度の異なる端末で確認する際に、ピクセルで指定するとデザインと見た目が変わるという問題が発生します。厳密にデザインに合わせる場合はＶＷや％で指定する必要があるのですが、ピクセルで指定していても端末間の見え方の違いについて突っ込まれることってほぼないと思います。端末間の見え方の違いについて気にしてる人は少ない、もしくは気になっても許容範囲としてスルーするされているのかな？と気になって質問させていただいております。
Re:4 フォントはremというところは同じです。あと、場所や案件によって使い分けというとこも同意です。ただ、デザインのマージンを図って、その数値（ピクセル）をMIXINでVWに変換するような書き方が回りくどいというか、どうもしっくりこないんですよね。その数ピクセルに価値はあるのか？と感じてしまいます。そこも案件によるんですが。。
remがある以上、pxを使う理由はあまりなさそう
Re:7 コメントありがとうございます。remで指定した場合でもルートのfont-sizeをvwにするかpxにするかでmargin、padding、font-sizeが端末のサイズに合わせて可変になるか固定になるかが変わってくると思います。可変、固定どちらにしようか？というところで悩んでおります。
基本的にスマホはリキッドで、vw指定。既に既存のサイトがあるなら指定方法を合わせて固定という場合もあるけど、一部画面幅100%の写真の上にテキストが乗るというようなデザインならvwという風にページ内でも使い分ける。
margin/padding は px、font-size は html/body には px で、あとは rem。margin/padding には vw/vh は使わないな。ちなみに基本どれにも vw は使わない。width には % でいい気がする。vh は height にはよく使う。% が効かない場面が多いので。
Re:10 追記。PCブラウザでの vw は縦スクロールバーを含んでしまうので、width:100vw; とかにするとウィンドウをはみ出して横スクロールバーが発生する。スマホでは心配ないが、width に vw を使うのはお勧めしない。
皆さまコメントありがとうございます。スレ主です。最近はスマホサイトのコーディング時にはmargin、padding、font-sizeすべてvw、％などですべて可変にしていたのですが、500～600pxくらいの時にフォントが大きすぎるのをケアするか？とか修正指示でピクセルで指定されたりする場合があるので、基本はpxで固定しちゃったほうが正解なんじゃないか？という気もしています。
Re:12 font-max-size とかあればいいんですけどねｗわたくしは、本文系や小さい文字はpxで、あとはほとんどvwか%ですね。margin,paddingも相対的なバランスを考えると可変の方がしっくりくるケースが多いと思う。どう見せたいか考え方で変わる感じです。
基本vwか%で指定してる。こうすればデバイスの画面サイズごとのサイズを明示的にコーディングす必要が無いし、レイアウトによつてはちょっと修正するだけでそのままPC〜モバイルまで対応できたりするし。
Re:14 ありがとうございます。フォントもマージンも全部VW、％にしたほうが良いような気がしてきました。結局のところ早くて、正確にできて、代理店やクライアントから突っ込みが入りにくい作り方が一番良いわけで、VWのほうが端末間の違いを気にしなくてもいい分、作るのが楽かもですね。
みんなviewport使わんの？
Re:12 font-sizeまで可変にする神対応してる制作者少ないと思いますよ！
vmaxとかvminとかをmediaqueryと併用して使うと幸せになれるかもしれんね。やったことないけど。
17 件の回答
どのデバイスでも同じような見た目になればなんでもええ！
場合によって使い分けてるけど主流はpxだと思う。
fontは文字をロゴっぽく画像みたいに扱いたい部分はvw使います。それ以外はrem。
たいていレスポンシブ前提だから、画面をresizeしていったときに細かく指定しなくてもいいように最近vwなど相対的な幅を指定することが多い。
主流はわからないな。他人のソース見るとみんな場所によって使い分けてる印象。
Re:2
コメントありがとうございます。
おっしゃる通りなのですが、iPhone8とiPhone8plusといった解像度の異なる端末で確認する際に、ピクセルで指定するとデザインと見た目が変わるという問題が発生します。
厳密にデザインに合わせる場合はＶＷや％で指定する必要があるのですが、ピクセルで指定していても端末間の見え方の違いについて突っ込まれることってほぼないと思います。
端末間の見え方の違いについて気にしてる人は少ない、もしくは気になっても許容範囲としてスルーするされているのかな？と気になって質問させていただいております。
Re:4
フォントはremというところは同じです。
あと、場所や案件によって使い分けというとこも同意です。
ただ、デザインのマージンを図って、その数値（ピクセル）をMIXINでVWに変換するような書き方が回りくどいというか、どうもしっくりこないんですよね。その数ピクセルに価値はあるのか？と感じてしまいます。そこも案件によるんですが。。
remがある以上、pxを使う理由はあまりなさそう
Re:7
コメントありがとうございます。
remで指定した場合でもルートのfont-sizeをvwにするかpxにするかでmargin、padding、font-sizeが端末のサイズに合わせて可変になるか固定になるかが変わってくると思います。
可変、固定どちらにしようか？というところで悩んでおります。
基本的にスマホはリキッドで、vw指定。
既に既存のサイトがあるなら指定方法を合わせて固定という場合もあるけど、一部画面幅100%の写真の上にテキストが乗るというようなデザインならvwという風にページ内でも使い分ける。
margin/padding は px、font-size は html/body には px で、あとは rem。margin/padding には vw/vh は使わないな。ちなみに基本どれにも vw は使わない。width には % でいい気がする。vh は height にはよく使う。% が効かない場面が多いので。
Re:10
追記。PCブラウザでの vw は縦スクロールバーを含んでしまうので、width:100vw; とかにするとウィンドウをはみ出して横スクロールバーが発生する。スマホでは心配ないが、width に vw を使うのはお勧めしない。
皆さまコメントありがとうございます。スレ主です。
最近はスマホサイトのコーディング時にはmargin、padding、font-sizeすべてvw、％などですべて可変にしていたのですが、500～600pxくらいの時にフォントが大きすぎるのをケアするか？とか修正指示でピクセルで指定されたりする場合があるので、基本はpxで固定しちゃったほうが正解なんじゃないか？という気もしています。
Re:12
font-max-size とかあればいいんですけどねｗ
わたくしは、本文系や小さい文字はpxで、あとはほとんどvwか%ですね。
margin,paddingも相対的なバランスを考えると可変の方がしっくりくるケースが多いと思う。
どう見せたいか考え方で変わる感じです。
基本vwか%で指定してる。
こうすればデバイスの画面サイズごとのサイズを明示的にコーディングす必要が無いし、レイアウトによつてはちょっと修正するだけでそのままPC〜モバイルまで対応できたりするし。
Re:14
ありがとうございます。
フォントもマージンも全部VW、％にしたほうが良いような気がしてきました。
結局のところ早くて、正確にできて、代理店やクライアントから突っ込みが入りにくい作り方が一番良いわけで、VWのほうが端末間の違いを気にしなくてもいい分、作るのが楽かもですね。
みんなviewport使わんの？
Re:12
font-sizeまで可変にする神対応してる制作者少ないと思いますよ！
vmaxとかvminとかをmediaqueryと併用して使うと幸せになれるかもしれんね。
やったことないけど。