移动端适配问题

最新推荐文章于 2024-08-17 00:41:11 发布

南赐

最新推荐文章于 2024-08-17 00:41:11 发布

阅读量3.6k

点赞数 1

分类专栏： css 文章标签： css 移动适配

本文链接：https://blog.csdn.net/qq_21342217/article/details/50934050

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

谈谈移动端适配问题

写过一些移动端的页面，但是总感觉写的不是很顺畅。css方面需要提升，用上了flexible.js进行重构，下面我谈谈遇到的问题，理解和总结：

先开个头，我认为移动端适配有几个关键词：动态屏幕宽度device-width，dpr-pt-px，meta标签——据说viewport是个比较复杂的概念，所以你也可以不用管，实践出真知。其实他不是个空词，只是讲多了弄易迷糊，也记不住，弄不懂（反正我不太懂）。把他们抓住了，我觉得应该说至少心里有底了。样式出问题的话容易有解决思路。
首先用的最多的是形成理想视口的meta标签是这样的：
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
虽然说固定高度，宽度自适应（垂直方向用定值，水平方向用百分比，定值，flex都行）的layout用的最多，但是这个meta并不是必须的，比如固定宽度，viewport缩放的layout采用这样的meta：

<meta name="viewport" contentn="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

这个0.5是根据屏幕宽度和meta里的width值动态确定的，好了，现在来谈谈今天的主题-第三种layout。
rem做宽度，viewpoort缩放–淘宝h5适配方案。lib-flexible主要是动态修改了meta标签，然后动态地html标签添加data-dpr属性（讲到这一点，w3c允许开发者可以给任何元素增加自定义属性，js用好自定义属性的话挺棒的）并且动态改变它的值，还有动态设置html tag的fz大小。

先引用flexible：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="apple-touch-icon" href="favicon.png">
    <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
    <title>再来一波</title>
  </head>
  <body>
    <!-- 页面结构写在这里 -->
  </body>
</html>

淘宝有人开发了px转rem的sublime插件cssrem，可是我觉得对于我来讲应该会降低效率，所以不太推荐，还有基于mixin的sass或者stylus提高开发效率的一些技巧，易sass为例：

@mixin font-dpr($font-size){
  font-size: $font-size;
  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }
  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

有了这样的混合宏之后，在开发中可以直接这样使用--推荐这样用mixin：

@include font-dpr(16px);

除去以上，lib.flexible还有makegrid栅格系统

尽管iphone dpr存在交大差异，但依然可以通过使用flexible达到在大屏手机上看到一行更多文本的效果：
rem 并不适合用到段落文本上，所以在Flexible整个适配方案中，考虑文本还是使用 px 作为单位。只不过使用 [data-dpr] 属性来区分不同 dpr 下的文本字号大小。

div {
  width: 1rem; 
  height: 0.4rem;
  font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
  font-size: 24px;
}
[data-dpr="3"] div {
  font-size: 36px;
}