精华内容
下载资源
问答
  • 移动端适配

    2018-09-27 14:43:13
    移动端适配
  • 移动端适配技术构成:remvw ,vhcalc()media queries 媒体查询百分比布局flex,grid flexible image 弹性图片1.设置 Meta 标签<meta name="viewport" content="width=device-width, user-scalable=no, initial-...

    8ac131c109767ba580c0a77e972dc36f.png

    移动端适配技术构成:

    • rem
    • vw ,vh
    • calc()
    • media queries 媒体查询
    • 百分比布局
    • flex,grid
    • flexible image 弹性图片

    1.设置 Meta 标签
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    2.前端单位

    • px
    • em:一个m的宽度,就是这样,绝不是一个汉字的宽度
    • pt,ex : 根本没人用
    • vw:视口(viewport)宽度
    • vh:视口(viewport)高度
    • rem:root em 根元素即html的font-size,如果 html的font-size:16px;那么 1rem = 16px

    rem 与 em 的区别:rem 参考根元素的font-size,em参考自己的font-size,也可能是继承得来的

    3.vw与vh 轻轻松松写页面

    将视口分为100份,50vw表示占50份,vh同理

    4567bb8e59cf0b9b4bfc767c859dc32f.png

    4.calc

    calc()函数可以动态计算长度。

    示例:动态计算宽度

    .box{
       width:calc(100% - 100px);
       margin: 20px auto;
    }

    5.rem模拟 vw

    一切以宽度为基准,就能完美还原设计稿,目前所有的单位除了 vw 都和宽度无关,可是其兼容性还不够。 2018.11.5测

    f3761fadbbb91a73710bf30314e8c9d5.png

    必要时用rem来模拟

    • 纯js:

    let VW = window.innerWidth;document.documentElement.style.fontSize = VW/10 + 'px';

    js里面除以10,所以页面分为10等分,5rem表示占一半

    23afb281a2a04d00b39f15f4f0b013e8.png
    • 使用scss将px自动转化为rem,就不用一个一个算rem了~

    b8e9baf16d0371f8b05ad7e35cae3419.png

    6.通过媒介查询来设置样式

    • 直接指定:

    @media screen and (max-width: 980px) {#head { }#content { }#footer { }}

    • 设置多种试图宽度

    @media only screen and (min-width: 50em){大于800的屏幕} 0-800@media only screen and (min-width: 30em) and (max-width: 50em){481-800的中屏幕} 480-800@media only screen and (max-width: 30em){小于480的小屏幕} 0-480

    • 使用link 标签的 media 可以指定宽度的css文件

    <link rel="stylesheet" href="./mobile.css" media="screen and (max-width:320px)">

    • 断点选择原则

    0-480 小屏幕

    481-800 中屏幕

    801-1400 大屏幕

    1400+ 巨屏幕

    7.宽度需要使用百分比

    虽然高度一般都是撑开的,而不是直接指定,但难免有特殊情况,其他需求,要百分比布局怎么办??所以复杂情况慎用。

    #head { width: 100% }#content { width: 50%; }


    8.flex布局 森仪:flex布局深入浅出


    9.处理图片缩放的方法

    html或css控制

    1. 设置图片src src (优先)

    img { width: auto; max-width: 100%; }<img src="image.jpg" src-600px="image-600px.jpg" src-800px="image-800px.jpg" alt="">

    js控制:

    var W = $(window).width();if(W > 800){$("img").attr("src",$("img").data("src-800px"))}else if(W > 600){$("img").attr("src",$("img").data("src-600px"))}

    2.最牛的是picture标签,兼容性害怕

    77997d430a70ae77a3f0d77440b003e9.png

    <picture><source media="(min-width:320px) and (max-width:480px)" srcset="ad001.png"><source media="(min-width:481px) and (max-width:800px)" srcset="ad001-m.png"><img src="ad001-l.png" alt=""></picture>

    其他:

    1.浏览器默认字体大小16px;谷歌最小字号默认12px,所以即使写了font-size:6px; 显示也是12px,可以改变设置;(点击内容设置)

    22a6347f1c2e971c7bf874d41b6649f2.png


    2.手机端的交互方式不一样

    • 没有 hover
    • 有 touch 事件,已经封装好的: jquery.swipe vue.swipe
    • 没有 resize
    • 没有滚动条


    Appendix:https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

    展开全文
  • 移动端适配我们需要做哪些事情? 一个最佳实践除了设置 viewport 和 rem 基准值,随着iPhone手机的不断升级,我们不得不正视以下2个问题: 安全区域适配 识别刘海屏 关于viewpoint-fit 在切入正题之前,我们先展开...

    移动端适配我们需要做哪些事情? 一个最佳实践除了设置 viewportrem 基准值,随着iPhone手机的不断升级,我们不得不正视以下2个问题:

    • 安全区域适配
    • 识别刘海屏

    关于viewpoint-fit

    在切入正题之前,我们先展开介绍一下viewpoint-fit,它的作用是用于设置可视区域的尺寸,属性如下:

    PropName Description Name viewport-fit For @viewpoint Value auto | contaion | cover Initial auto Percentages N/A Computed value as specified

    最初的布局视窗是通过物理设备的屏幕进行计算,如下图所示:

    0af9afd1bbedaa836857075dba3925ff.png

    圆形的屏幕上上显示的页面的一部分,目前是圆的但视窗是长方形的。因此,根据窗口的大小,页面的某些部分可以省略。viewport-fit 可以通过设置可视区域的大小来控制被省略的区域。

    • auto:当设置成auto时,不会影响初始布局视口,并且整个网页都是可见的。 UA在视口外部绘制的内容未定义。 它可能是画布的背景颜色,也可能是UA认为合适的任何其他颜色。
    • contain:当设置成contain时,初始布局视口和可视视口设置为最大矩形,该矩形内接在设备的显示中。 UA在视口外部绘制的内容未定义。 它可能是画布的背景颜色,也可能是UA认为合适的任何其他颜色。
    • cover:当设置成cover时,初始布局视口和可视视口设置为设备物理屏幕的外接矩形。

    注意:当设置成 contain时,border-boundary: displayshape-inside: display 无效。

    在非矩形显示器上设置视口边界框的大小时,我们必须考虑以下因素:

    • 由于视口边界框的区域大于显示区域而导致的剪切区域
    • 视口的边界框与显示区域之间的间隙

    开发者可以决定哪个因素比另一个更重要。 如果必须保证网页的任何部分都不被隐藏,则避免剪切比在视口的边界框和屏幕边界之间留有间隙更重要。 如果开发者不希望网页因可读性而变小,那么最好将viewport-fit设置为cover并在考虑剪裁部分的情况下实现页面。

    示例演示

    为了方便理解,下面是针对 containcover 的示例代码和效果图

    当使用contain时,初始视口将应用于显示的最大内接矩形:

    @viewport (viewport-fit: contain) {
        /* CSS for the rectangular design */
    } 

    fc9c701bb824b286409fd789ac2a0474.png

    当使用cover时,初始视口应用于显示的外接矩形:

    @viewport {
        viewport-fit: cover;
    }
    @media (shape: round){
        /* styles for the round design */
    }
    @media (shape: rect){
        /* styles for the rectangular design */
    }

    9b73f6b5202d9688aaa695afa17f35c6.png

    安全区域适配

    根据上文所述,为了安全区域不影响页面渲染,我们可以使用viewport-fit等于cover来来解决:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> 

    识别刘海屏

    ios识别刘海屏比较容易,我们可以通过计算屏幕的宽度和高度来快速识别。首先我们罗列一下iPhone现有机型的屏幕尺寸:

    Device 竖屏尺寸 横屏尺寸 缩放比例 iPhone XS Max 1242px * 2688px 2688px * 1242px x3 iPhone XS 1125px * 2436px 2436px * 1125px x3 iPhone XR 828px * 1792px 1792px * 828px x2 iPhone X 1125px * 2436px 2436px * 1125px x3 iPhone 8 Plus 1242px * 2208px 2208px * 1242px x3 iPhone 8 750px * 1334px 1334px * 750px x2 iPhone 7 Plus 1242px * 2208px 2208px * 1242px x3 iPhone 7 750px * 1334px 1334px * 750px x2 iPhone 6s Plus 1242px * 2208px 2208px * 1242px x3 iPhone 6s 750px * 1334px 1334px * 750px x2 iPhone SE 640px * 1136px 1136px * 640px x2

    其中 iPhone XS Max、iPhone XS、iPhone XR、iPhone X 需要适配刘海屏,而这4类屏幕在真机或模拟器里表现出来的screen尺寸是有一个共性的:

    screen.width === 375 && screen.height === 812
    或
    screen.width === 414 && screen.height === 896

    完整的代码如下:

    function deviceDetection() {
      const ua = navigator.userAgent
      let osVersion = ''
      let device = ''
      try {
        if (/android/i.test(ua)) {
          device = 'android'
          osVersion = ua.match(/Androids+([d.]+)/i)[0].replace('Android ', '')
        } else if (/ipad|iphone|ipod/i.test(ua)) {
          device = 'ios'
          osVersion = ua.match(/OSs+([d_]+)/i)[0].replace(/_/g, '.').replace('OS ', '')
        }
      } catch (err) {
        /* istanbul ignore next line */
        console.error(err)
      }
      return { osVersion, device }
    }
    
    // 判断是否为刘海屏
    export function isFringe() {
      const { device } = deviceDetection()
      const { screen } = global
      return device === 'ios' && 
        ((screen.width === 375 && screen.height === 812) || (screen.width === 414 && screen.height === 896))
    }

    此外,Android端虽然刘海屏机型较为杂多,但我们习惯容器上会把状态栏的高度和刘海对齐,从而不影响内容的展示

    参考

    • iPhone X的缺口和CSS

    本文由博客一文多发平台 OpenWrite 发布!

    展开全文
  • 我检查代码和公司蓝湖的设计图发现整个项目并没有搭配任何移动端适配方案,并且每个页面没有采用像素级还原,而是用一些百分比和flex来达到一些简单的适配。这样开发一是实现效果很差,设置在一些区别比较大的手机上...

    696e0fa094793e7c1d3de3a43557107c.png

    最近拿到新公司移动端的项目,是一个react app项目。我检查代码和公司蓝湖的设计图发现整个项目并没有搭配任何移动端适配方案,并且每个页面没有采用像素级还原,而是用一些百分比和flex来达到一些简单的适配。

    这样开发一是实现效果很差,设置在一些区别比较大的手机上会出现显示上的bug,比如iphone5的小屏幕和iphone10的大屏上。二是开发上很麻烦,本来产品画好的产品图,把参数复制写进去就行了,但是现在开发使用产品图的参数就完全开发不了。

    这时我想到了我开发小程序时使用的rpx,微信端设定好的适配方案,全部按宽750px来实现,微信会在不同的设备下为我们自动调整。按照这个思路我找到了淘宝弹性布局方案lib-flexiblepostcss-px2rem来实现React移动端项目750px的适配方案。

    下面是详细实现:

    第一步

    我们把两个包下载下来

    yarn 

    第二步

    在项目入口文件index.js引入lib-flexible

    import 

    图:

    89840b16f5346ac9e5985cb1ad34661f.png

    第三步

    在webpack中配置postcss-px2rem

    webpack.config.js

    const 

    6f0e98c0bef152771a6f1229aab8c142.png

    第四步

    注释掉模板index.html内的

    <!-- 

    create-react-app 的模板index.html在public下

    图:

    7d0370943f28f49e36395644b4575f62.png

    最后调整蓝湖设计稿大小 输入750px

    c8dc17f5dff00976817c9b697af564b3.png

    实际效果 页面按钮样式:

    .button

    在 iphone6/7/8plus下 所有px自动转为适配的rem

    e0150e0ce47a78a3a01d3b5216a9d96c.png

    在iphone 5/SE下 又转为对应rem 整体效果完全不变

    0bf2c5e6a772e5deb65a21f87a18796a.png

    更新一下 最近发现一个问题

    这样进行移动端适配后 自己写的样式虽然完全没有问题,但是如果使用Ant Design Mobile进行开发的话,蚂蚁金服的样式会出问题导致无法使用。

    解决方案:

    配置webpack的postcss-px2rem,让它不去检查/node_modules/,也就是不作用antd等引入的库。但是我去设置postcss-px2rem的exclude选项发现并没有起作用,翻博客发现,postcss-px2rem无法设置exclude排除项,然后有个人修改postcss-px2rem的源码,做了一个postcss-px2rem-exclude可以设置排除项(亲测有用)。

    yarn 

    修改webpack.config.js

    const px2rem = require('postcss-px2rem-exclude');
    
     px2rem({ remUnit: 75 ,exclude:/node_modules/i}),

    15468260400428436506474c9a0bcdb8.png
    展开全文
  • 每个品牌的手机都有着不同的物理分辨率和逻辑分辨率,此时 375 的设计稿,如果想要还原那基本是不可能了,每个设备的右边所展示的内容大小就不尽相同,这个时候就需要web前端工程师进行移动端适配。下面我们详细了解...

    96d7c764376b6d6ec8360f306c2ba287.png

    三微授渔,授你以渔

    c0dece52e55dffbed51cddf61257c95f.png

    一般情况下吗,设计稿的设计师按照 375 的尺寸设计,在手机(移动端)快速更新迭代的今天,每个品牌的手机都有着不同的物理分辨率和逻辑分辨率,此时 375 的设计稿,如果想要还原那基本是不可能了,每个设备的右边所展示的内容大小就不尽相同,这个时候就需要web前端工程师进行移动端适配。下面我们详细了解一下。

    如何适配

    我们先设置一个meta,然后再进行适配。meta的各个属性不在解释,有兴趣的同学可以自行了解。

    <meta name='viewport' content='width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;'>

    适配方法:

    1.单位选择rem

    rem是相对长度单位,rem方案中的样式设计为相对于根元素font-size计算值的倍数。根据 屏幕宽度 设置html标签的font-size,在布局时使用 rem 单位布局,达到自适应的目的,是 弹性布局 的一种实现方式。

    实现方法: 首先获取文档根元素和设备dpr,设置 rem,在html文档加载和解析完成后调整body字体大小; 在页面缩放 / 回退 / 前进的时候, 获取元素的内部宽度,重新调整 rem 大小。

    Js代码(在header添加)

    (function() {

    function autoRootFontSize() {

    document.documentElement.style.fontSize =Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';

    // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值;除以750,乘以32,就是原本是750大小的32px;

    // 如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化!

    }

    window.addEventListener('resize', autoRootFontSize);

    autoRootFontSize();

    })();

    接下来就可以使用rem作为css单位了

    2.vh/vw方案

    vh、vw 方案即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分为 100 份。 使用sass进行适配

    //iPhone 6尺寸作为设计稿基准

    $vm_base:375;

    @function vw($px){

    @return ($px/375)*100vw;

    }

    设置相应的vw之后就可以使用vw作为css单位,如:

    .title{

    font-size:vw(16);

    }

    3.基于媒体查询+rem

    @media screen and (min-width:350px){

    html{font-size:342%;}}

    @media screen and (min-width:360px){

    html{font-size:351.56%;}

    }@media screen and (min-width:375px){

    html{font-size:366.2%;}

    }@media screen and (min-width:384px){

    html{font-size:375%;}

    }@media screen and (min-width:390px){

    html{font-size:380.85%;}

    }@media screen and (min-width:393px){ /* 小米NOTE */

    html{font-size:383.79%;}

    }@media screen and (min-width:410px){

    html{font-size:400%;}

    }@media screen and (min-width:432px){ /* 魅族3 */

    html{font-size:421.875%;}

    }@media screen and (min-width:480px){

    html{font-size:469%;}

    }@media screen and (min-width:540px){

    html{font-size:527.34%;}

    }@media screen and (min-width:640px){

    html{font-size: 625%;}

    }

    @media screen and (width:720px){

    html{font-size: 703.125%;}

    }

    接下来就可以使用rem作为css单位了,而不用编写js,各有优劣。

    4.基于媒体查询+rem,这里不做赘述

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,023
精华内容 3,209
关键字:

移动端适配