精华内容
下载资源
问答
  • 移动端自适应方案 一
    2022-03-10 14:33:06

    1.首先设置html或者body字体大小,设置好后,内部元素的1rem值会被这个值改变。

    2. font-size="设备宽度/设计稿宽度" 将这个值作为1rem的px个数,像素不能太小,就x100.

    3. 那么设计稿中元素为25px值时候,在设备上就是25rem,然后在除以100,就是0.25rem;

    <script>
    	(function (doc, win) {
    		var docEl = doc.documentElement || doc.body,
    			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    			recalc = function () {
    				var clientWidth = docEl.clientWidth;
    				if (!clientWidth) return;
    				docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
    			}
    		if (!doc.addEventListener) return;
    		win.addEventListener(resizeEvt, recalc, false);
    		doc.addEventListener('DOMContentLoaded', recalc, false);
    	})(document, window);
    </script>
    

    2.淘宝rem适配方案 开源

    页面首先引入

    a:<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>

    b:下载flexible.js 等文件到项目指定目录下,然后在head中引入。建议对于js做内联处理,在所有资源加载之前执行这个js。

    原理:

    动态计算html的font-size =设计图的总宽度除以10,就是基准值

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

    如果设计师给的图纸是750的,font-size=75px;页面元素的大小是100px,你就应该在css设置为100/75=1.33rem;

    如果设计师给的图纸是375的,font-size=37.5px;页面元素的大小是100px,你就应该在css设置为100/37.5=2.67rem;

    注意:

    字体不使用rem的方法

    可以通过媒体查询的方式或者[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;
    

    更多相关内容
  • 自适应布局我知道的两种方式 1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px <style> @media only screen and (max-width: 360px) and ...
  • 本篇文章主要介绍了详解基于vue-cli配置移动端自适应,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 通用手机端样式: @media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : landscape) { /*横屏*/ } 指定手机端高度样式: ...@media screen and (max-width: 750px) ...
  • flexible:移动端自适应

    2021-05-08 23:33:10
    移动端适配方案 概念 单位英寸像素数(Pixel Per Inch,PPI) 现实世界的一英寸内像素数,决定了屏幕的显示质量 dpr dpr 是 devicePixelRatio 的简写,也就是屏幕分辩比(设备像素比率) 分辨率(Resolution) 屏幕...
  • 如何解决PC端和移动端自适应问题?下面小编就为大家带来一篇PC端和移动端自适应问题的快速解决方法。希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦
  • Html移动端自适应

    2017-01-24 11:09:16
    Html5刮刮卡页面,自适应各种手机端
  • 移动端自适应flexible

    2018-07-07 16:38:55
    移动端自适应插件,css可直接写px 会自动计算自适应不同分辨率下布局
  • NULL 博文链接:https://maoting.iteye.com/blog/2268992
  • 移动端自适应

    2019-11-25 21:44:27
    移动端自适应 下面介绍一些有关移动端自适应的一些概念。 1. 什么是Viewport? ​ 手机浏览器会把页面放入到一个虚拟的“视口”(viewport)中,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视...

    移动端自适应

    下面介绍一些有关移动端自适应的一些概念。

    1. 什么是Viewport?

    ​ 手机浏览器会把页面放入到一个虚拟的“视口”(viewport)中,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域大,也可能比浏览器的可视区域小。通常这个虚拟的“视口”(viewport)比屏幕宽,会把网页挤到一个很小的窗口。如果不显示地设置viewport,那么浏览器就会把width默认设置为980。但后果是浏览器出现横向滚动条,因为浏览器可视区域的宽度比默认的viewport的宽度小。然后浏览器引进了 viewport这个 meta tag,让网页开发者来控制 viewport的大小和缩放。

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

    meta viewport 的6个属性:

    • width : 设置viewport的宽度
    • height: 设置viewport的高度
    • initial-scale : 设置页面的初始缩放值
    • minimum-scale :允许用户的最小缩放值
    • maximum-scale:允许用户的最大缩放值
    • user-scalable: 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许,一般设置为no

    特殊说明:(IE6,7,8)支持,需要使用css3mediaqueries.js

    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
      <![endif]-->
    

    2. rem和em的区别?

    rem和em在做移动端自适应非常的重要,它们都是相对单位

    1. em (相对父级)

      例如: 父节点字体大小16px,子节点设置字体大小为1.25em,子节点字体大小转化为像素为 1.25 x 16 = 20

      1. rem(相对根节点)

      例如: 根节点字体大小16px,任一节点设置字体大小为1.25rem,节点字体大小转化为像素为 1.25 x 16 = 20

    3. 物理像素、设备像素、逻辑像素、CSS像素

    设备像素 = 物理像素 , 设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。

    1. css像素

      css像素是css样式表语言中用来表示长度的一个单位,单位是px。

    2. 设备像素(DP device pixels)

    设备像素(物理像素),顾名思义,显示屏是由一个个物理像素点组成的,通过控制每个像素点的颜色,使屏幕显示出不同的图像,屏幕从工厂出来那天起,它上面的物理像素点就固定不变了,单位pt。

    1. 逻辑像素( logic point )

    逻辑像素的单位是PT,它是按照内容的尺寸计算的单位。比如iPhone 4的逻辑像素是480x320pt。但是由于每个逻辑的点因为视网膜屏密度增加了一倍,即1pt=2px,那么其实iPhone 4的物理像素是960x640px。

    展开全文
  • adaptive:移动端自适应

    2021-04-28 04:08:09
    adaptive 是一个移动端自适应的插件,引用插件放到html头部head即可。 原理是,根据屏幕分辨率来修改meta标签的缩放值,从而来实现页面自适应。优点是不需要修改原来px单位的css代码,解决rem布局css逐帧动画1像素...
  • 京东商城移动端自适应布局,用了h5标签和css3的一些属性,iscroll屏幕滑动插件,还有移动端touch触摸屏事件使用。
  • 主要介绍了vue移动端自适应,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习 价值,需要的朋友们一起来学习学习吧 方案一:直接引入js (自己 写的动态改变fontsize的js) function htRem ...

    主要介绍了vue移动端自适应,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习 价值,需要的朋友们一起来学习学习吧

    方案一:直接引入js (自己 写的动态改变fontsize的js)

    function htRem () {
      var ww = document.documentElement.clientWidth;
      if (ww > 750) {
        ww = 750;
      }
      document.documentElement.style.fontSize = ww / 7.5 + "px";
    }
    htRem();
    window.onresize = function () {
      htRem();
    };
    

    在main.js中import引入即可

    方案二:使用插件

    1. 安装依赖
    cnpm install lib-flexible postcss-pxtorem --save-dev
    //或
    
    npm install lib-flexible --save
    npm install postcss postcss-pxtorem --save-dev
    
    1. main.js导入
    // 移动端适配
     import ‘lib-flexible/flexible’; 
    
    1. 创建.postcssrc.js并配置
    // https://github.com/michael-ciniawsky/postcss-load-config
    module.exports = {
      plugins: {
        autoprefixer: {
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
        },
        'postcss-pxtorem': {
          rootValue({ file }) {
            return file.indexOf('vant') !== -1 ? 37.5 : 75;
          },//这样当遇到vant组件,rootValue值为37.5,而其他我们自己的样式文件rootValue值为75
          propList: ['*']
        }
      }
    }
    
    1. 按照上面的步骤写完后,使用时设计图750px的,那设计图要是300px的宽度,那代码里面写成300px。这样就可以了
    2. postcss-pxtorem切换版本
      当进行项目启动,会发现报错,查了原因可能是版本不匹配。
      所以切换postcss-pxtorem的版本
    npm i postcss-pxtorem@5.1.1 --save-dev
    

    注意

    1. 不使用行内样式
      对于行内样式,阿里手淘并不能将px转rem,所以对于需要自适应的样式,如font-size、width、height等请不要写在行内。同理,对于不需要转化的样式可以写在行内,或者使用PX(大写)作为单位。

    2. 字号不使用rem
      我们都知道chrome的最小显示的字体是12px,如果字体用rem,计算出来小于12px,那么就也会以12px显示,而且我们不希望出现13px或者15px这样的奇葩尺寸,所以字体最好是用PX(大写)来表示,至于适应,我们可以写媒体查询

    .item {
          border-bottom: 1PX #8d8d8d dashed;
          font-size: 12PX;
          line-height: 16PX;
          @media screen and (min-width: 576PX) {
            font-size: 14PX;
            line-height: 18PX;
          }
    	  @media screen and (min-width: 768PX) {
            font-size: 16PX;
            line-height: 28PX;
          }
          @media screen and (min-width: 992PX) {
            font-size: 16PX;
            line-height: 32PX;
          }
          @media screen and (min-width: 1200PX) {
            font-size: 18PX;
            line-height: 64PX;
          }   
    } 
    

    vm适配

    1. 安装依赖
    npm install postcss-px-to-viewport -D
    
    1. 在根目录下新建 .postcssrc.js 文件
    module.exports = {
      plugins: {
        autoprefixer: {
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
        },
        'postcss-px-to-viewport': {
          viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
          unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
          viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
          selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
          minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
          mediaQuery: false // 允许在媒体查询中转换`px`
        }
      }
    }
    
    1. 保存文件后我们重启项目即可
      当然啦,前面的都是建立在没有进行rem的适配,如果你的项目进行了rem 的适配我们需要在做如下操作:
      main.js 文件中删除如下代码
    import "lib-flexible/flexible";
    

    package.json 文件中删除如下代码

    "lib-flexible": "^0.3.2",
    "postcss-plugin-px2rem": "^0.8.1",
    

    重启项目

    展开全文
  • 上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局——移动端自适应布局和响应式页面兼容移动端布局。 一、移动端自适应布局 所谓前端适配,就是为了让移动设计...

          上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局——移动端自适应布局和响应式页面兼容移动端布局。

    目录

    一、移动端自适应布局

    1.rem

    什么是rem

    rem布局原理

    2.媒体查询

    查询类选   (mediatype)

    关键字

    媒体特征(media feature)

    媒体查询语法

    3.less

    变量(Variables)

    嵌套(Nesting)

    运算(Operations)

    注释(Comments)

    导入(Importing)

    4.rem适配方案

    二、响应式页面兼容移动端布局

    1.媒体查询

    2.Bootstrap

    平均分的类前缀

    列嵌套

    列偏移

    列排序

    ​响应式工具

    3.bootstrap组件的使用方法


    一、移动端自适应布局

            所谓前端适配,就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度,一种是使用rem自适应布局的flexible.js。

    1.rem

    • 什么是rem

            rem和我们之前学过的em一样,都是css中的单位,并且都是相对单位。我们知道,em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小。而rem单位是基于html中元素的字体大小。

            了解到rem是什么之后,我们再来了解一下rem的布局原理。 

    • rem布局原理

            其实rem布局的本质是等比缩放,一般是基于宽度,当我们的屏幕变小了,如果里面的内容也会跟着等比例缩小,那么就可以实现在不同的屏幕大小呈现相同的效果,这不正是我们所希望的吗?

            假设我们将屏幕宽度平均分成100份,每一份的宽度用x表示,x = 屏幕宽度 / 100,如果将x作为单位,x前面的数值就代表屏幕宽度的百分比。

    p {width: 50x} /* 屏幕宽度的50% */ 

            当屏幕缩小时,p占的宽度也在相应的减小,在css并没有x这样神奇的单位,但我们可以通过rem作为桥梁,来实现这样的效果。我们发现,如果子元素设置rem单位的属性,通过更改html元素的字体大小,就可以让子元素实际大小发生变化,达到整体控制的效果。

    2.媒体查询

            我们可以通过rem来实现在不同屏幕下控制页面元素等比例缩放,那么问题又来了,我们怎么来识别此时的屏幕大小呢?通过什么方式识别呢?那么在这里就引入我们自适应布局的第二个知识点——媒体查询。

            使用 @media 查询,可以针对不同的媒体类型定义不同的样式。也可以针对不同的屏幕尺寸设置不同的样式,在制作响应式布局时,媒体查询也会有很大的用处。

            在重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

    • 查询类选   (mediatype)

    1. all 用于所以设备

    2. print 用于打印机和打印预览
    3. screen 用于电脑屏幕,平板电脑,智能手机等
    • 关键字

    关键字:将媒体类型或多个媒体特征连接到一起作为媒体查询的条件

    1. and 将多个媒体特征连接到一起,相当于”且“
    2. not 排除某个媒体特征 相当于”非“ 可以省略
    3. only 指定某个特定的媒体类型 可以省略
    • 媒体特征(media feature)

    1. width 定义输出设备中页面可见区域的宽度

    2. min-width 定义输出设备中页面最小可见区域的宽度

    3. max-width 定义输出设备中页面最大可见区域的宽度 

    • 媒体查询语法

       @media mediatype and|not|only (media feature) {
               CSS-Code;
            }

    注:

    1. 用@media开头
    2. mediatype 媒体类型
    3. 关键字 and not only
    4. media feature 媒体特性,必须用小括号包含
    5. 多个区间建议从小到大或者从大到小,注意CSS的层叠性,相同属性执行就近原则

            了解完媒体查询的基本用法之后,我们可以通过该方法划分区间,实现在不同屏幕中元素大小发生改变的效果。

    /*该案例实现了在不同大小下屏幕呈现不同的背景颜色*/
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>媒体查询案例</title>
        <style>
            div {
                height: 100px;
                background-color: green;
            }
    
            @media screen and (max-width:1200px) {
                div {
                    background-color: blue;
                }
            }
    
            @media screen and (max-width:992px) {
                div {
                    background-color: red;
                }
            }
    
            @media screen and (max-width:768px) {
                div {
                    background-color: pink;
                }
            }
    
            body {
                width: 100%;
                min-width: 500px;
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

    效果图如下:

             可以看到在不同的区间有不同的背景颜色,实现了我们理想中的效果。

    3.less

            解决了如何区分屏幕大小后,那么问题又来了,我们使用rem单位进行布局时,需要将px单位转换为rem单位,简单的转换我们能够很快计算出来,那复杂的呢?这么看起来rem单位使用起来好像更加复杂了。

            于是,在这里介绍一种新语言——less。less是一门向后兼容的 CSS 扩展语言,为CSS添加了一些新的功能。

    • 变量(Variables)

            当我们页面中多次使用某一个值且希望更改时达到同时变更的效果,我们将这个值定为一个变量。通过例子来理解。

    @width: 10px;
    @height: @width + 10px;
    
    header {
      width: @width;
      height: @height;
    }
    

    该段代码编译成css文件为:

    
    header {
      width: 10px;
      height: 20px;
    }

            当我们想要更改页面中所有width的大小时,直接更改@width后面的数值即可。

    • 嵌套(Nesting)

            Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。子元素的样式我们可以直接书写在父元素中。

            注意:如果遇见(交集、伪类、伪元素选择器)需要加&符号

    假设我们有如下CSS代码:

    header {
      color: black;
    }
    header .navigation {
      font-size: 12px;
    }
    header .logo {
      width: 300px;
    }
    header .logo:hover{
      width:400px;
    }

    使用less书写为:

    #header {
      color: black;
      .navigation {
        font-size: 12px;
      }
      .logo {
        width: 300px;
      }
      .logo&:hover{
        width:400px;
      }
    
    }

            使用less嵌套的话可以让代码逻辑更清晰,也更加简洁。  

    • 运算(Operations)

            在CSS里面不能进行计算,于是在less中引入了运算。在less中可以进行+-*/的运算。可以对任何数字颜色变量进行运算。如果可能的话,算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如:px 到 cm 或 rad 到 % 的转换。注意运算符左右需要用空格隔开。

    // 所有操作数被转换成相同的单位 并以最左侧单位为最终单位
    @conversion-1: 5cm + 10mm; // 结果是 6cm
    @conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm 
    
    // conversion is impossible 无效的单位换算
    @incompatible-units: 2 + 5px - 3cm; // 结果是 4px
    
    // example with variables
    @base: 5%;
    @filler: @base * 2; // 结果是 10%
    @other: @base + @filler; // 结果是 15%
    

            乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义,一个长度乘以一个长度就得到一个区域,而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作,并将为计算结果指定明确的单位类型。

    @base: 2cm * 3mm; // 结果是 6cm
    

            还可以对颜色进行算术运算:

    @color: #224488 / 2; //结果是 #112244
    background-color: #112244 + #111; // 结果是 #223355

            less运算可以大大减少在css中的计算量。

    • 注释(Comments)

            在less中行注释和块注释都可以使用   //      /*   */   这两种方式。

    • 导入(Importing)

            当我们需要在less文件中导入另一个文件时,我们使用@import进行导入。当导入文件为.less格式时,可以省略后缀名。

    @import "library"; // library.less
    @import "typo.css";
    

    4.rem适配方案

            至此,我们已经了解了自适应布局的核心内容。当我们使用rem进行布局时,有两种适配方案。

    • less+媒体查询+rem布局

            该方法的使用思路是利用媒体查询划出屏幕区间,设置在不同的区间下,根元素的大小不同,实现元素在不同屏幕下的缩放。我们可以为想要划分的份数定义一个变量,而屏幕宽度 / 划分的份数 就是根元素的font-size值。

    • flexible.js+rem

            rem的另一种适配方案就是搭配js使用,引入flexble.js文件,可以不适用媒体查询。flexble.js是将我们当前屏幕平均分成10份。另外在vs code里面有一个插件可以直接将px单位转为相应的rem单位,但是需要根据每次的设计稿更改根元素的font-size,一般我们以750px的设计稿为准。


            总结:我们移动端响应式布局主要分为流式布局(百分比布局)、flex伸缩布局和rem布局,我们布局的核心思想是选取其中一种布局方式为主,其他方式为辅助布局。

    二、响应式页面兼容移动端布局

            我们之前学习的布局方式是将移动端和pc端分别进行布局的,而响应式页面兼容移动端布局是将pc端和移动端都用一套样式文件,不用另外书写移动端的样式。该方法书写起来需要注意更多的细节,所以在移动端布局时,主流方式还是采取流式布局、flex伸缩布局或者rem布局中的一种。

    1.媒体查询

            在本方法中,我们也需要通过媒体查询来识别当前屏幕大小,对不同宽度的设备进行布局和样式的设置,从而适配不同设备。

    设备的划分情况:

    • 小于768的为超小屏幕(手机)

    • 768~992之间的为小屏设备(平板)

    • 992~1200的中等屏幕(桌面显示器)

    • 大于1200的宽屏设备(大桌面显示器)

              我们可以使用一个父级作为容器,来配合子级元素来实现变化效果。我们通过媒体查询改变父容器大小,再改变里面子元素的大小和排列方式,以此来达到我们的目的。

    父容器版心的尺寸划分如下:

    • 超小屏幕(手机,小于 768px):设置宽度为 100%

    • 小屏幕(平板,大于等于 768px):设置宽度为 750px

    • 中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px

    • 大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px

    我们也可以根据实际情况进行划分。

    2.Bootstrap

            Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。        

    • Bootstrap的优点
    1. 标准化的html+css编码规范
    2. 提供了一套简洁、直观、强悍的组件
    3. 有自己的生态圈,不断地更新迭代
    4. 让开发更简单,提高了开发的效率
    • 使用四步曲

         1.创建文件夹结构    2.创建html骨架结构  3.引入相关样式文件 4.书写内容

    • container容器  

            在bootstrap中,为我们提供了两种container容器。

    1. container类 响应式布局容器
    2. container-fluid类 流式布局容器
    • 栅格系统

            bootstrap的官方描述为:Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

            简单来讲,就是bootstrap将我们的页面平均分为12份,并且bootstrap执行的是移动设备优先的策略,是从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格。而bootstrap是通过行与列的概念进行布局的。

    平均分的类前缀

            bootstrap将不同的屏幕尺寸的屏幕用不同的类名表示:        

    •     小于768px  container最大宽度100%  :clo-xs-份数
    •     大于等于768px container最大宽度750px  : clo-sm-份数
    •     大于等于992px:container最大宽度970px :.col-md-份数
    •     大于等于1200px:container最大宽度1170px :.col-lg-份数

        注意点:
            1.每一列默认有左右15px的内边距。
            2.可以为一列同时指定多个设备的类名,实现响应式布局。例如 class="col-md-4 col-sm-6"可以实现在中屏幕下该区域占4份,在小屏幕下占6份。


    列嵌套

            在列嵌套时最好加一个行row,可以取消父元素的padding值,高度和父级一样高

    <!-- 列嵌套 -->
     <div class="col-sm-4">
        <div class="row">
             <div class="col-sm-6">小列</div>
             <div class="col-sm-6">小列</div>
        </div>
    </div>
    


    列偏移

            在栅格系统中,我们想要盒子与盒子之间有间隙,在container容器的12份没被瓜分完时,我们可以使用offset类,让盒子进行偏移。其原理就是给盒子加上一个左外边距,系统会根据当前屏幕的大小自动计算这个外边距的值。

    <!-- 列偏移 -->
      <div class="row">
          <div class="col-lg-4">1</div>
          <div class="col-lg-4 col-lg-offset-4">2</div>
      </div>
    


    列排序

            当我们在开发中遇到想要给两边的盒子交换排列顺序时,我们可以使用push类和pull类。
        .col-md-push  
        .col-md-pull 将右侧盒子拉到左边

    <!-- 列排序 -->
      <div class="row">
          <!-- 将左侧盒子推到右边 -->
          <div class="col-lg-4 col-lg-push-8">左侧</div> 
          <!-- 将右侧盒子拉到左边 -->
          <div class="col-lg-8 col-lg-pull-4">右侧</div>
      </div>

    排序前:

    排序后:


    响应式工具

             该工具能够帮助我们在不同的屏幕下对元素做一些隐藏和显示效果。

             使用hidde隐藏元素,使用visible显示元素。

    3.bootstrap组件的使用方法

            在bootstrap官网中下载版本,在官网中有相应的css样式文档,还有一些组件,在样式文件中找到我们需要的部分,在我们的项目中引入的bootstrap的相关样式后,我们就可以将该部分的样式复制到我们的html代码中,再修改细节就可以了。

            中文网  官网

            注意:下载的版本、引入的版本和查询的相关样式版本需一致。


            至此,移动端的常用布局都有所了解了,后面的就需要通过练习来加深印象,巩固学习。

            希望本篇分享对前端学习的各位有所帮助,若有错误,希望留言指出~

    展开全文
  • vue配置移动端自适应

    2022-04-24 16:48:41
    最近在做移动H5开发,屏幕开始使用px做适配,不太好用,现在改为rem,各种百度做了自适应匹配,教程如下!勿喷、勿喷,各位觉得哪里不合适需要改进给我留言哦! 配置教程 安装flexible 命令:cnpm install lib-...
  • 移动端自适应插件

    2015-06-05 15:43:39
    自适应移动端页面,PC页面也可以
  • 实现html移动端自适应

    2022-03-03 09:01:56
    1.在头部修改viewport,如下: <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-...2.在header中新增以下代码,实现html的自适应 <script> (function(doc, win) { var doc
  • 场景:为适应各种大小的屏幕自适应布局我知道的两种方式1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px@media only screen and (max-width: 360px...
  • 从而做到rem的自适应。 @media (width: 375px) { html { font-size: 20px; } } 三:使用flexible.js文件来实现适配 (clientWidth是对象可见的宽度) (1)flexible.js手淘框架的核心原理就是根据不同的对象...
  • 之前自己接了个项目 PC+移动端 自动适配显示,因为手机端需要自适应,pc也是需要自适应 项目里 PC用的1920px,移动端用的375px,使用媒体查询适配显示 一、环境 使用lib-flexible,为html上添加 动态的font-size...
  • vue移动端自适应

    千次阅读 多人点赞 2021-04-22 20:36:45
    1、vue ui创建项目 2、选择基本配置项 3、运行项目 4、新建rem.js文件 // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。...
  • 效果图:移动端 Index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
  • computed: { styleVar() { let h = this.hieght - 37; return 'height:' + h + 'px';...//列表自适应高度 listHeight() { let h = 0; let contentHeight = 0; if (window.innerHeight) { h = wi...
  • vue3.0实现移动端自适应

    千次阅读 2021-04-01 13:57:11
    vue3.0实现移动端自适应 项目使用vue3.0编写代码,说要打包成apk文件,在安卓上看,现在需要适配移动端的样式,记录一下,亲测有效。 安装插件 vue脚手架略过 lib-flexible : 会自动在html的head中添加一个<meta...
  • vue项目实现移动端自适应

    千次阅读 2021-01-11 10:34:08
    情景:前端开发经常需要根据一套原型来匹配不同的移动端,原型上标注的尺寸是px,如果需要匹配不同的像素,我们需要自己转换尺寸。通过引用插件可以实现一套像素适应不同的移动端,而开发人员只需要根据原型提供的...
  • 这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值,需要的朋友可以参考下1、使用meta标签:viewportH5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕...
  • 移动端自适应代码

    2020-12-06 21:06:18
    <script> //屏幕适应 (function (win){ if (!win.addEventListener) return; var html=document.documentElement; function setFont(){ var cliWidth=html.clientWidth; html.style.fontSize=100*
  • 第一步:安装vant npm i vant -S yarn add vant 第二步:引入组件 (推荐自动按需引入组件) ① 安装babel-plugin-import插件 babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动...

空空如也

空空如也

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

移动端自适应

友情链接: BaiduImageSpider.zip