精华内容
下载资源
问答
  • PC端和移动端适配样式fit.css
  • pc端和移动端适配

    2020-08-19 22:01:59
    移动端适配 1.安装两个插件库 lib-flexiblepx2rem-loader flexible.js是淘宝官方H5移动适应解决方案 px2rem会在项目编译的过程中根据根结的font-size值将我们项目css中的px单位转成rem, 其中不需要转成rem的可以...

    一. 移动端适配

    1.安装两个插件库 lib-flexible和px2rem-loader
    flexible.js是淘宝官方H5移动适应解决方案
    px2rem会在项目编译的过程中根据根结的font-size值将我们项目css中的px单位转成rem,
    其中不需要转成rem的可以写成PX ,UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要" !important "进行样式覆盖。

    2.操作步骤
    第一步:安装lib-flexible 执行 npm install lib-flexible --save
    第二步: 在min.js中引入 import ‘lib-flexible’

    其中:lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem。

    第三步:需要使用px2rem-loader自动将css中的px转换成rem。安装px2rem-loader 执行 npm install px2rem-loader --save-dev 。
    第四步:需要配置px2rem-loader ,
    1.打开build/utils.js文件,找到 exports.cssLoaders 方法,在里面添加如下代码
    const px2remLoader = {
    loader: ‘px2rem-loader’,
    options: {
    remUint: 75, //75代表屏幕宽度/10,根据开发屏幕宽度配置 75=750/10
    remPrecision: 8 //换算的rem保留几位小数点
    }
    }
    2.修改 generateLoaders 方法中的 loaders
    // 注释掉这一行
    // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    // 修改为
    const loaders = [cssLoader, px2remLoader]
    if (options.usePostCSS) {
    loaders.push(postcssLoader)
    }
    然后重新npm run dev,打开控制台可以看到代码中的px已经被转成了rem

    注意:只能做移动端的适配,pc端是不能使用的 ,我们在vue的node_modules文件夹下的lib-flexible文件夹下可以看到flexible.js中 是判断屏幕宽度,屏幕宽度大于540就会把宽度定死。
    在这里插入图片描述
    不推荐使用移动端的适配做pc端适配,如果一定要使用可以更改一下代码(慎用,没这样使用过)
    function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
    width = width * dpr;//当屏幕宽度超过540的时候我们应该以实际宽度重新计算,从而来做到适应PC
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + ‘px’;
    flexible.rem = win.rem = rem;
    }

    pc端适配

    1.安装postcss-px2rem及px2rem-loader
    第一步,npm install postcss-px2rem px2rem-loader --save
    第二步,在根目录src中新建util目录下新建rem.js等比适配文件
    // rem等比适配配置文件
    // 基准大小
    const baseSize = 16
    // 设置 rem 函数
    function setRem () {
    // 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + ‘px’
    }
    // 初始化
    setRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
    setRem()
    }
    第三步,在main.js中引入 rem.js 适配文件 import ‘./util/rem.js’
    第四步,到vue.config.js中配置插件
    // 引入等比适配插件
    const px2rem = require(‘postcss-px2rem’)

    // 配置基本大小
    const postcss = px2rem({
    // 基准大小 baseSize,需要和rem.js中相同
    remUnit: 16
    })

    // 使用等比适配插件
    module.exports = {
    lintOnSave: true,
    css: {
    loaderOptions: {
    postcss: {
    plugins: [
    postcss
    ]
    }
    }
    }
    }

    展开全文
  • PC端和移动端适配样式(css样式)

    千次阅读 2020-10-15 10:30:17
    pcPC端,yd:移动端 .pc{ display: block; } .yd{ display: none; } @media screen and (max-width:700px){ .pc{ display: none; } .yd{ display: block; } }

    pc:PC端,yd:移动端

    .pc{
        display: block;
    }
    .yd{
        display: none;
    }
    @media screen and (max-width:768px){
        .pc{
            display: none;
        }
        .yd{
            display: block;
        }
    }
    

    这里的768px宽度是网络上标准的宽度。

    展开全文
  • 项目需求:XX项目时间赶,主做PC端移动端是在原有基础上改动, 在这一基础上,建议直接采用@media 媒体查询对大小屏幕进行css调整,通过window.screen.width判断屏幕宽度 一、需要一个全局globalMixin.js,判断...

    项目需求:XX项目时间赶,主做PC端,移动端是在原有基础上改动,

    在这一基础上,建议直接采用@media 媒体查询大小屏幕进行css调整,通过window.screen.width判断屏幕宽度
    在这里插入图片描述
    在这里插入图片描述

    一、需要一个全局globalMixin.js,判断当前屏幕为移动端还是PC端
    export const GlobalMixin = {
    	data() {
    	    return {
    	        isApp: false // true:代表移动端,false:代表PC端
    	    }
    	},
    	created() {
    		/** 先判断平台,pc端 or 移动端*/
            this.whichPlatform()
    	},
    	methods: {
            /** PC端、移动端 判断*/
            whichPlatform() {
                if(window.screen.width < 800) {
                    this.isApp = true
                }else {
                    this.isApp = false
                }
            }
        }
    }
    
    二、在.vue文件中mixins混入globalMixin.js,直接根据 isApp变量修改样式

    可以通过 :class:style 改变当前样式,也可根据 @media媒体查询来修改样式

    <template>
    	<div :class="isApp ? 'red' : 'blue'">
    		小屏幕背景颜色为红色,大屏幕背景为蓝色 (可以通过F12检查代码,切换大小屏幕,感受变化)
    	</div>
    	<div :style="{height: isApp ? '100px' : '300px'}">
    		小屏幕最小高度为100px,大屏幕高度为300px (可以通过F12检查代码,切换大小屏幕,感受变化)
    	</div>
    	<div class="box">
    		小屏幕宽度为50%,大屏幕宽度为100% (可以通过F12检查代码,切换大小屏幕,感受变化)
    	</div>
    	<div class="platform_pc">PC端)改行文字在PC端展示,在移动端消失
    	</div>
    	<div class="platform_app">
    		(移动端)改行文字在移动端展示,在PC端消失
    	</div>
    </template>
    <script>
    	import { GlobalMixin } from '@/mixins/globalMixin'
        export default {
            name: 'XXX',
            mixins:[GlobalMixin],
        }
    </script>
    <style>
    	.red{ background: red;}
    	.blue{ background: blue;}
    	.box{ width: 100%}
    //媒体查询 自适应
    //PC端
    @media screen and (min-width:800px){
      .platform_pc{
        display: block;
      }
      .platform_app{
        display: none;
      }
    }
    //移动端
    @media screen and (max-width:700px){
      .platform_pc{
        display: none;
      }
      .platform_app{
        display: block;
        max-width: 100%;
      }
      .box{ width: 50%;}
    }
    </style>
    
    展开全文
  • 第一步:新建flexible.js文件 这里默认是10等份,手动改为24,此时1rem=1920/24px即80px。(设计稿是1920px的) (function flexible(window, document) { var docEl = document.documentElement;...

    第一步:新建 flexible.js文件

    这里默认是10等份,手动改为24,此时1rem=1920/24px即80px。(设计稿是1920px的)

    (function flexible(window, document) {
      var docEl = document.documentElement;
      var dpr = window.devicePixelRatio || 1;
    
      // adjust body font size
      function setBodyFontSize() {
        if (document.body) {
          document.body.style.fontSize = 12 * dpr + "px";
        } else {
          document.addEventListener("DOMContentLoaded", setBodyFontSize);
        }
      }
      setBodyFontSize();
    
      // set 1rem = viewWidth / 10
      function setRemUnit() {
        var rem = docEl.clientWidth / 24;
        docEl.style.fontSize = rem + "px";
      }
    
      setRemUnit();
    
      // reset rem unit on page resize
      window.addEventListener("resize", setRemUnit);
      window.addEventListener("pageshow", function(e) {
        if (e.persisted) {
          setRemUnit();
        }
      });
    
      // detect 0.5px supports
      if (dpr >= 2) {
        var fakeBody = document.createElement("body");
        var testElement = document.createElement("div");
        testElement.style.border = ".5px solid transparent";
        fakeBody.appendChild(testElement);
        docEl.appendChild(fakeBody);
        if (testElement.offsetHeight === 1) {
          docEl.classList.add("hairlines");
        }
        docEl.removeChild(fakeBody);
      }
    })(window, document);
    

    第二步:去vscode下载一个cssrem插件,并修改设置

     

    第三步在index.vue中引用

    引用完就可以使用了

     

     

     

     

    展开全文
  • 兼容pc端和移动端适配

    多人点赞 2020-08-19 11:16:28
    移动端适配方式也有很多,比如%,em,rem,vw,vh等,这里说说vw兼容方法, pc端: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...
  • 能够在PC端和移动端进行适配显示,但是主要还是在PC端使用。自适应的主要用的rem,栅格化,媒体查询等我都有所了解。但是一般情况下PC端和移动端完成之后布局是不一样的。 现在我看到一个网站...
  • 同一项目PC端和移动端适配有两种方案: 路由适配   路由适配就是在路由导航守卫中判断设备,然后根据设备进入不同的程序入口,但是这种方案有一个缺点,我在PC端输入移动端的地址会怎样?不能进入移动端的页面,...
  • 1.创建移动端和PC端两套CSS样式 项目开源地址 2.在页面里通过设备判断加载不同的CSS样式 代码如下: created: function () { if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|...
  • PC端移动端的页面适配及兼容处理

    万次阅读 多人点赞 2018-06-11 16:26:49
    一、关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源。 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端; 第二种是通过终端判断分别调取两套资源以适配所有终端。 ...
  • pc端移动端适配解决方案之rem
  • Vue 实现PC端和移动端的自适应

    千次阅读 2020-08-16 16:30:43
    1、Vue 实现PC端和移动端的自适应 步骤如下: 1.1、 安装lib-flexible npm i lib-flexible --save 1.2、 main.js 里 引入 lib-flexible import 'lib-flexible' 1.3、 在项目根目录的 index.html 中添加如下 meta ...
  • 屏幕分辨率 : 屏幕横向纵向的像素点数,单位为px 相同大小的屏幕 分辨率越低,单位像素尺寸越大,分辨率越高,单位像素尺寸越小 图像分辨率 : 指图片含有的像素数 , 表示图片分别在垂直水平上所具有的像素点数 ...
  • pc和移动端适配方案
  • 基于pc移动端完美适配模板解决方案,对于前端新手来说稍加改动就可完成建站
  • PC端和移动端的区别

    千次阅读 2018-09-01 01:56:01
    1.PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配不同操作...
  • PC端移动端页面适配方案

    千次阅读 2019-12-17 13:18:14
    前言  页面自适应PC端移动端大体上可以分为两种: ... 本文记录在java后端进行PC端移动端页面适配的方案  工程结构  想要实现后端统一适配,首先要规范好工程结构  后端代码,跟之前差不多,响应的...
  • Nginx:pc端和移动端网站适配

    千次阅读 2019-02-20 14:24:27
    目的:电脑浏览器访问展示pc端的页面,手机浏览器访问展示手机的页面,两套页面,两个域名。 server { listen 80; server_name domain.com www.domain.com; client_max_body_size 10m; set $mobile_...
  • Vue项目适配移动端 + 适配PC端

    千次阅读 2021-01-23 09:31:55
    一、适配PC端 参考文档:https://www.cnblogs.com/wuqilang/p/13491766.html 1、 在 /src/assets 目录下新增 js 文件夹,在js文件夹中新增 flexible.js (function flexible(window, document) { var docEl = ...
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> 那么这行代码有什么意义呢?...先说一下单位,我们经常看到的是以像素为单位,但是也会有以百分比rem为单位的。 那么,在
  • 写在前面:最近写前端项目需要做移动设配和PC端的适配,移动端适配包括了平板各式各样的手机。之前都是直接使用自己做的rem换算单位来进行适配,但是,现在发现没法适配平台。最近一直在查资料,可算是让我找着了...
  • 解决移动端适配方案,lib-flexible的安装与导入借鉴下面链接的步骤可以轻易实现 https://blog.csdn.net/u012878818/article/details/88190907 接下来是在使用px2rem中遇到的坑 基于目前 vue-cli 脚手架已经更新至...
  • pc端适配移动端

    千次阅读 2018-11-16 13:33:33
    pc端和移动端共用一套代码 1. 允许网页宽度自动调整 在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> ...
  • 一举解决了百分比定位flex布局的遗留问题。 rem优点:做到了“完美适配” rem缺点:只是等比放大,小屏下字体小,大屏下字体大。 上面是根据高度来确定字体单位,这里可以用宽度来确定字体单位。  var ...
  • vue项目移动端pc端适配方案(px转rem)

    万次阅读 多人点赞 2020-02-06 13:18:30
    vue项目移动端pc端适配方案 vue项目移动端pc端适配方案 lib-flexible 根据屏幕宽度,自动设置html的font-size px2rem-loader 自动将px单位转换成rem 一、第一步先安装 flexible px2rem-loader(命令行...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,219
精华内容 4,487
关键字:

pc端和移动端适配