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
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- web app开发之rem
- ios web App 使正文中的图片、视频根据屏幕尺寸自适应
- React的Web端自适应布局(rem+flex)
- web移动端CSS使用rem单位设置font-size自适应
- WebApp开发之--"rem"单位
- APP 半自适应 WEB页面
- 【web】强大的屏幕适配布局rem响应式 实现一套web代码多端自适应适配
- 【web】强大的屏幕适配布局rem响应式 实现一套web代码多端自适应适配
- WebApp开发之--"rem"单位(转)
- WebApp开发之--"rem"单位
- 手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应
- 移动端web页面自适应和rem
- Web Desktop App(修订版)
- webapp div click事件不能响应的解决办法
- ScriptX IE打印 页面自适应 大小 适用于IE7一下的web打印
- Web网站和移动App的规划差异主要体现在哪些方面你知道吗?
- maven webapp项目更改servlet版本
- App与Web的设计区别(上):使用场景与设计方法
- CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\....\App_Web_default.aspx.cdcab7d2.zii776dc.dll”--“拒绝访问。 ”
- Nexus启动失败The nexus-webapp service was launched, but failed to start. .