个人是个 UI 设计师, 公司前段时间需要做个移动端商城的项目, 正好前端有事, 主管之前知道我会点前端, 就让我做, 可把我害惨了. 在网上看了很多移动端适配的方案, 文章前后几千字, 罗里吧嗦的一大段, 看到结尾只懂点概念! 所以我直接把我的办法写出了!
第一步:
media 标签写在 head 里面:
[color=#ff0000]<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
第二步: 加载头部 script
- <!-- 定义 rem 值: 网易移动适配方案!-->
- <script>
- document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
- </script>
附注: 7.5 是根据你的设计稿的 width 决定写多少, 如果是 640 的, 那就写 6.4; 其他道理一样!
第三部: 在 CSS 样式里, 一个 div 如果是宽 500px 高 200px; 那么就是这样写:
- div{width:5rem;
- height:2rem
- }
字体不用 rem; 直接写像素! 就是这么简单!
- / 根部字体 media 设置 /
- @media screen and (max-width:321px){
- .m-navlist{font-size:15px}
- }
- @media screen and (min-width:321px) and (max-width:400px){
- .m-navlist{font-size:16px}
- }
- @media screen and (min-width:400px){
- .m-navlist{font-size:18px}
- }
来源: http://www.qdfuns.com/article/43972/69e94922de924482b522e1610ae30d64.html