您的位置:首页 > 移动开发

web--app 自适应 rem;

2020-03-05 09:42 501 查看

CSS3之rem;尽量不考虑IE的前提下 瞎写一点~

遇到问题:在html5开发APP 遇到一些自适应问题;

解决办法: 使用CSS3新的单位rem;

 

打开网址  http://mxd.tencent.com/wp-content/uploads/2014/11/rem.html

左边输入 美工切图所按照的尺寸  我这里是720PX(width:720px; 分号一定要写上;下面的设计稿宽度也要写上720);下面红色框(现在市面上主流手机屏幕) 全勾选了;

点击蓝色转换按钮;右边生成CSS;

将代码复制到自己的CSS 里面 ;再引用CSS(引用link最好最后引用,不然可能出不来);

 

将以前用PX写的图片字体 代码转换成rem;

右边720px的1rem=20px;

所以, 假如美工按照720PX给你发的图片大小是width:200px;height:200px;

那么现在尺寸就是

.xxx{width:10rem;height:10rem;}

这样写出来的样式就能适应不同手机端屏幕大小;WEB也一样~

 

转载于:https://www.cnblogs.com/xiaomurunning/p/5553612.html

  • 点赞
  • 收藏
  • 分享
  • 文章举报
anchentan3472 发布了0 篇原创文章 · 获赞 0 · 访问量 31 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: