ホームページ > ウェブフロントエンド > H5 チュートリアル > 移动端如何实现自适应所有设备?

移动端如何实现自适应所有设备?

WBOY
リリース: 2016-06-07 08:44:28
オリジナル
1848 人が閲覧しました

针对市场上不同屏幕的手机,如何用CSS实现所有屏幕!除了媒体查询,还有其他方法么?

回复内容:

宽度设置成100%,图标部分不用或少用图片,字体单位父层使用rem,子层使用em。必要时针对一些分辨率可单独设置css Mobile的自适应的确是大家关注的一个问题,而实现方案也有多种,他们之间更有所长,各有所短,但总的来说,就是单位的运用:

  1. 新一点的有vw,vh,vmax,vmin
  2. rem,但rem要对html根元素的font-size做一定的处理,而这个处理都是通过js脚本来做,淘宝这方面用得非常好,也很成熟
  3. 百分比,这个可能就需要一定的经验

有兴趣的不仿看看:长度单位 | 博客自由标签 使用相对单位而不使用绝对单位,不过这样的话图片有可能会变得很奇怪,那么就把图片之类不能拉伸的东西设置成浮动... 让你的页面轻松适配各种移动设备和PC端浏览器
ufologist.github.io/res rem+图标字体 很棒
関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート