search

Home >Web Front-end >H5 Tutorial >移动端如何实现自适应所有设备？

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

WBOY
WBOYOriginal
2016-06-07 08:44:281846browse

针对市场上不同屏幕的手机，如何用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+图标字体 很棒
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：物联网的实时性问题 B/S架构的客户端Socket编程？Next article：有哪些比较好用的h5工具呢？要免费的哈。。。

Related articles

See more