小tips:使用rem+vw实现简单的移动端适配
2019-03-06 07:17:42来源:博客园 阅读 ()
首先设置meta属性,如下代码:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
使用如下代码就能实现移动端的适配:
html { font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); }
100vw相当于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!那么1vw就是表示1%的屏幕宽度。
其中的13.33333333vw是怎么来的呢?就是你的设计稿是750px,那么设计稿的1px就是0.133333333vw,那么100px就是13.33333333vw。也即是html的font-size设置为100px相当于1rem(设计稿为750px)。那么我们就可以很轻松的换算设计稿中的单位为rem了,比如一个元素宽度为150px,转换为rem就是1.5rem。其他尺寸设计稿的计算方式依次类推。
参考网易新闻移动端的写法:
/** * view-port list: 320x480 320x568 320x570 360x592 360x598 360x604 360x640 360x720 375x667 375x812 393x699 412x732 414x736 480x854 540x960 640x360 720x1184 720x1280 800x600 1024x768 1080x1812 1080x1920 */ html { font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } @media screen and (max-width: 320px) { html { font-size: 42.667px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 321px) and (max-width: 360px) { html { font-size: 48px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 361px) and (max-width: 375px) { html { font-size: 50px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 376px) and (max-width: 393px) { html { font-size: 52.4px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 394px) and (max-width: 412px) { html { font-size: 54.93px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 413px) and (max-width: 414px) { html { font-size: 55.2px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 415px) and (max-width: 480px) { html { font-size: 64px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 481px) and (max-width: 540px) { html { font-size: 72px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 541px) and (max-width: 640px) { html { font-size: 85.33px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 641px) and (max-width: 720px) { html { font-size: 96px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 721px) and (max-width: 768px) { html { font-size: 102.4px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 769px) { html { font-size: 102.4px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } body { font-family: "PingFangSC-Regular", "Microsoft YaHei", Helvetica; color: #333333; background: #f5f7f9; } html a { color: #333333; }
这样写法也是为了兼容老版本手机不支持vw以及calc语法。
参考地址:
- 《最简单的移动端适配方案(rem+vw)》
- 《CSS3 calc实现滚动条出现页面不跳动》
- 《从淘宝和网易的font-size思考移动端怎样使用rem?》
原文链接:https://www.cnblogs.com/moqiutao/p/10473415.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- CSS中的float和margin的混合使用 2020-06-11
- 使用 Apache SSI(Server Side Includes) 制作多语言版静态网 2020-06-01
- 通配符选择器 2020-05-27
- ECharts安装与使用 2020-05-26
- 使用CSS完成商城首页的优化 2020-05-05
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash