美文网首页
移动端最佳适配方案

移动端最佳适配方案

作者: 我是大师兄啊 | 来源:发表于2018-06-07 08:41 被阅读100次

从阿里的flexible 到 利用css media 再到百分比 几个方案试用下来觉得各有利弊,这里总结出一套比较简单粗暴的适配方案 分享一下

首先是meta,比较常规

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 

css 部分 以设计稿750px 为例

html{  font-size:13.333333vw;}
.rect{ width:1rem; height:1rem;}

利用VW单位换算,这里 1rem 就等于100px; 简单粗暴有木有!! 不需要算百分比,不需要sass less 单位换算,不需要media媒体查询hack,

缺点:

1.由于100/750 约等于13.3333 所以并不是准确的100px.实际上是99.8888888等,但是误差几乎可以忽略不计。

  1. VW兼容性,anriod4.4以下需用JS hack,可参考flexible

完。

相关文章

  • 移动端适配

    移动端适配 dpr、DPI、PPI 视口 移动端适配的方案 微信小程序适配方案 微信小程序开发

  • 移动端开发(Html+Css)

    placeholder自定义 移动端适配CSS方案 移动端适配方案一 font-size可能需要额外的媒介查询,并...

  • 移动端最佳适配方案

    从阿里的flexible 到 利用css media 再到百分比 几个方案试用下来觉得各有利弊,这里总结出一套比较...

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点 字体的大小...

  • 记一次前端技术分享(移动端相关概念讲解)

    移动端开发中的相关概念讲解 1、移动端自适配方案 移动端如何根据不同手机尺寸进行页面的适配 rem 自适应和 vw...

  • 2018-07-02待学习文章

    1.RN移动端适配:移动端适配方案 flexible.js - 云库网 2.React16新特性:reveal.j...

  • 移动端适配的rem最佳方案

    rem方案有好几种方式,下面这种是相对较好的一种 思路步骤 以设计稿宽度为750为例;根据实际屏幕宽度动态修改 h...

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小。...

  • 移动端适配方案

    @description 该方法是用于移动端适配功能, 结合淘宝的适配方案flexible + rem 实现适配,...

  • 移动端rem适配

    三:多屏适配布局问题 出处:【原创】移动端高清、多屏适配方案 再谈移动端适配和点5像素的由来 使用相对单位:rem...

网友评论

      本文标题:移动端最佳适配方案

      本文链接:https://www.haomeiwen.com/subject/guewsftx.html