html写前端手机页面,前端编写手机兼容页面(简易方式)

HTML

CSS

HTML5

CSS3

前端编写手机兼容页面(简易方式)

CgpOIF5EAWWAQ0y_AAcB-fDz9P0878.png

这两天开始编写手机页面,作为类似官网一样的使用,因为实在手机端访问的web端,没有做过尝试,而且由于手机的种类很多,导致兼容性要求很高,在网上找了一些教程,制作完毕后决定分析给大家。

先给大家看下成品效果图:

9c0c275dfd0f3094dd9a6bd0378414e4.png

这就是手机访问之后的样子了,那具体怎么做好兼容,又能省事省力呢,我从网上找到了这个框架:

5eddfe30c675278fdd09c49d24d154e5.png

直接百度:ydui,这是一个专门为移动端web前端使用框架,使用方式也很简单,打开这个网站点击开始使用

这是测试页面,我们只需要下载这个框架的文件就行了,之后调用上面代码中调用到的css,以及js即可,之后所有的内容写在class为g-view的div中,这个框架就可以自动帮你调整兼容性了,需要注意的是,这是移动端框架,所以只支持移动端,如果是pc端或者平板访问可能就不会很兼容了。

为了和团队开发大小规范,一般移动端的单位都是rem,所以不能再用px作为单位了,可是作为设计还是会给你px的图纸,为此我们就需要自己计算好单位换算即可。

内容来源于网络,如有侵权请联系客服删除

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值