精华内容
下载资源
问答
  • flex+流式布局+rem+less+响应式
  • 移动端布局

    2021-05-18 08:12:41
    课程目标: 本课程带领大家详细学习移动端布局和移动端网站开发原理 课程简介: 1,移动端介绍 2,移动端分辨率 3、移动端的设计 4,移动端知识点 5,通过案例讲移动端布局           ...
  • 移动端布局终极解决方案 --- 让移动端布局开发更加容易
  • 前言 眼看着做两顿凉皮的功夫,2020第一季度就要过完了。 过去的三个月,好像经历了很多,又好像什么都没留下。 这种茫然的背后,是我们特殊...1.移动端基础 浏览器现状 国内的UC和QQ等手机浏览器都是根据webkit修
  • * 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android开发的一样 * 兼容移动端主流浏览器,处理Webkit内核浏览器即可
  • 上篇博客讲到了移动端的常用布局模式之一: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代码中,再修改细节就可以了。

            中文网  官网

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


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

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

    展开全文
  • 移动端布局(flex布局) 1.视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 1.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于...

    移动端布局(flex布局)

    1.视口

    视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

    1.1布局视口 layout viewport

    一般移动设备的浏览器都默认设置了一个布局视口,用于解2C端页面在手机上显示的问题。

    iOS, Android基本都将这个视口分辨率设置为 980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。
    在这里插入图片描述

    1.2视觉视口 visual viewport

    字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。

    我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。

    在这里插入图片描述

    1.3理想视口 ideal viewport

    为了使网站在移动端有最理想的浏览和阅读宽度而设定

    理想视口,对设备来讲,是最理想的视口尺寸

    需要手动添写meta视口标签通知浏览器操作

    meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽

    总结:我们开发最终会用理想视口,而理想视口就是将布局视口的宽度修改为视觉视口

    1.4meta标签

    在这里插入图片描述

    最标准的viewport设置

    • 视口宽度和设备保持一致
    • 视口的默认缩放比例1.0
    • 不允许用户自行缩放
    • 最大允许的缩放比例1.0
    • 最小允许的缩放比例1.0

    2.flex布局

    2.1flex布局原理

    • flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。
    • 当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。
    • flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
    • 采用 Flex 布局的元素,称为 Flex 容器(flex

    container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex
    item),简称"项目"。

    总结:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

    2.2父项常见属性

    • flex-direction:设置主轴的方向
    • justify-content:设置主轴上的子元素排列方式
    • flex-wrap:设置子元素是否换行
    • align-content:设置侧轴上的子元素的排列方式(多行)
    • align-items:设置侧轴上的子元素排列方式(单行)
    • flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap

    2.2.1flex-direction设置主轴的方向

    • 在 flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有 : 行和列、x 轴和y 轴
    • 默认主轴方向就是 x 轴方向,水平向右
    • 默认侧轴方向就是 y 轴方向,水平向下
      在这里插入图片描述
    • 注意: 主轴和侧轴是会变化的,就看 flex-direction 设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
      在这里插入图片描述

    2.2.2justify-content 设置主轴上的子元素排列方式

    在这里插入图片描述

    2.2.3flex-wrap设置是否换行

    • 默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,flex布局中默认是不换行的。
    • nowrap 不换行
    • wrap 换行

    2.2.4align-items 设置侧轴上的子元素排列方式(单行 )

    • 该属性是控制子项在侧轴(默认是y轴)上的排列方式 在子项为单项(单行)的时候使用
    • flex-start 从头部开始
    • flex-end 从尾部开始
    • center 居中显示
    • stretch 拉伸

    2.2.5 align-content 设置侧轴上的子元素的排列方式(多行)

    • 设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况(多行),在单行下是没有效果的。
      在这里插入图片描述

    2.2.6 align-content 和align-items区别

    • align-items 适用于单行情况下, 只有上对齐、下对齐、居中和 拉伸
    • align-content适应于换行(多行)的情况下(单行情况下无效), 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
    • 总结就是单行找align-items 多行找 align-content

    2.2.7flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

    flex-flow: row wrap;
    

    2.3flex布局子项常见属性

    • flex子项目占的份数
    • align-self控制子项自己在侧轴的排列方式
    • order属性定义子项的排列顺序(前后顺序)

    2.3.1 flex 属性

    flex 属性定义子项目分配剩余空间,用flex来表示占多少份数。

    .item {
        flex: <number>; /* 默认值 0 */
    }
    
    注:flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为:0  1 auto。后两个属性可选。
    flex-grow属性:定义子项宽度之和不足父元素宽度时,子项拉伸的比例;flex-grow: <number> /*数字,default 0 */
    flex-shrink属性:定义了项目的缩小比例,默认为:1,即如果空间不足,该项目将缩小,定义子项宽度之和超过父元素宽度时,子项缩放的比例。
    flex-basis属性:定义子项的初始宽度,若子项宽度之和超过父元素宽度时,子项按照flex-basis的比例缩放。
    

    2.3.2align-self控制子项自己在侧轴上的排列方式

    align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。

    默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch

    span:nth-child(2) {
          /* 设置自己在侧轴上的排列方式 */
          align-self: flex-end;
    }
    

    2.3.3order 属性定义项目的排列顺序

    数值越小,排列越靠前,默认为0。(注意:和 z-index 不一样。)

    .item {
        order: <number>;
    }
    
    
    展开全文
  • 移动端布局

    2018-10-25 10:51:29
    (当然移动端布局不需要考虑这些兼容的问题) 在了解一下手机屏幕分辨率以及逻辑分辨率(以iPhone为参照) 移动端物理像素和逻辑像素 设备 物理像素 逻辑像素 物理像素/逻辑像素 iPhone...

    首先先了解html中这一句话的含义:

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

     width - viewport-的宽度 height - viewport的高度
                initial-scale - 初始的缩放比例
                minimum-scale - 允许用户缩放到的最小比例
                maximum-scale - 允许用户缩放到的最大比例
                user-scalable - 用户是否可以手动缩放

    然后在了解一个单位rem

     

    rem是CSS3新增的一个相对单位(root em,根em)。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。(当然移动端布局不需要考虑这些兼容的问题)

    在了解一下手机屏幕分辨率以及逻辑分辨率(以iPhone为参照)

    移动端物理像素和逻辑像素
    设备物理像素逻辑像素物理像素/逻辑像素
    iPhoneX1125*2436375*8123

    iPhone6splus

    1080 * 1920

    1242 * 2208

    414 * 736

    3

    iPhone6

    750 * 1334

    375 * 667

    2
    iPhone5640*1136320*5682
    iPhone4640*960320*4802

    iPhone 1G

    320*480320*4801

    iPhone 3G

    320*480320*4801

    iPhone 3GS

    320*480320*4801

     

    屏幕大小相同,分辨率越高,像素点越小

    今天先总结移动端的两种布局方式就是写法以及实例明天将会总结第三种方法;

    首先第一种:

    就是在head部分加上

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

    上代码都按照逻辑像素点1:1的去写代码

    按设计图与手机尺寸比例去算出相同效果大小的px值;

    第二种:

    运用rem去解决自动适应屏幕的大小比例;

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <!-- 自动获取屏幕宽度设置html字体大小的js -->
        <script>
            
            (function(){ var 
                doc = document.documentElement,
                resize = 'onorientationchange' in window ? 'orientationchange' : 'resize',
                resizeEvent = function () {
                // 获取设备宽度
                var WIDTH = doc.clientWidth
                // 设置宽度
                doc.style.fontSize = 100 * WIDTH / 750 + "px"
                }
            
                window.addEventListener('DOMContentLoaded', resizeEvent)
                window.addEventListener(resize, resizeEvent)})();
        </script>
        <style>
            body{
                margin: 0;
            }
            header {
                height: .88rem;
                background: red;
                font-size: .32rem;
            }
        </style>
    </head>
    <body>
        <!-- 以设计图为标准
        750px宽度时,将html字体大小设置为100px
        375px宽度时,将html字体大小设置为50px -->
        <header>文字文字文字文字文字文字文字文字文字文字文字文字文字</header>
    </body>
    </html>

     

    展开全文
  • viewport和移动端布局

    千次阅读 2019-12-02 18:28:31
    viewport和移动端布局 前端开发中,响应式布局通常需要适应不同分辨率的设备 常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh 1.px和视口 在静态页面中我们经常使用像素(px)作为单位,来描述一个元素的宽高以及...

    viewport和移动端布局
    前端开发中,响应式布局通常需要适应不同分辨率的设备
    常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh
    1.px和视口
    在静态页面中我们经常使用像素(px)作为单位,来描述一个元素的宽高以及定位信息
    在pc端,通常认为1px表示的真实长度是固定的
    但是在不同的设备上,px的大小显示结果肯定会不一致,移动端显示较小
    那么css中的1px的真实长度到底由什么决定
    1.像素
    像素是网页布局的基础,一个像素表示了计算机屏幕所显示的最小区域
    像素分为两种:css像素和物理像素
    1.css像素:web开发者提供,css中使用的一个抽象单位
    2.物理像素:只与设备的硬件密度有关,任何设备的物理像素都是固定的
    2.视口
    广义视口,浏览器显示内容的屏幕区域.狭义视口:
    1.布局视口
    布局视口定义了pc网页在移动端的默认布局行为,因为pc分辨率较大
    布局视口默认是980px,也就是说在不设置网页的视口的情况下
    pc端的网页默认以布局视口为基准,在移动端进行展示
    所以默认为布局视口的时候,根植于pc的网页,在移动端显示的很模糊
    2.视觉视口
    视觉视口表示浏览器内看到的网站显示区域,用户可以通过缩放来查看网页
    显示内容,从而改变视觉视口,就像拿一个放大镜分别从不同距离观察同一
    个物体,因此视觉视口不会影响布局视口的宽度和高度
    3.理想视口
    理想的布局视口,在移动设备中就是指设备的分辨率
    就是给定设备物理像素的情况下,最佳的"布局视口"
    为了理清分辨率和物理像素之间的关系
    1 设备像素比(DPR) = 物理像素/分辨率
    在不缩放的情况下:
    1 CSS像素 = 物理像素/分辨率
    在移动端的布局中,我们可以通过viewport元标签来控制布局

    width:定义布局视口的宽度,单位为像素
    height:定义布局视口的高度,单位为像素
    initial-scale:初始缩放比例,1表示不缩放
    minimum-scale:最小缩放比例
    maximum-scale:最大2缩放比例
    user-scalable:是否允许手动缩放页面
    在移动端布局,在meta标签中将width设置为device-width
    这样就将布局视口设置为理想的视口
    3.px与自适应
    设置布局视口为理想视口
    1 CSS像素 = 物理像素/分辨率
    pc的布局视口通常为980px,iphone6是375667,也就是布局视口在理想情况下式375px
    比如现在有一个750px
    1134px的视觉稿
    pc: 1 CSS像素 = 750/980 = 0.76px
    iphone6: 1 CSS像素 = 750/375 = 2px
    也就是说在pc端,一个CSS像素可以用0.76个物理像素来表示
    而在iphone端,一个CSS像素表示了2个物理像素
    因此在css中通过px作为长度和宽度的单位,是无法实现各端的自适应
    2.媒体查询
    给每一种设备分别设置一套样式
    使用@media媒体查询可以针对不同的媒体类型定义不同的样式,特别是响应式页面
    可以针对不同屏幕的大小编写多套样式,从而达到自适应
    缺点:浏览器大小改变的时候,需要改变的样式太多,繁琐
    3.百分比
    当浏览器的宽高发生改变的时候,通过百分比,让组件的宽高随浏览器的变化而变化,实现响应式
    CSS子元素中的百分比到底是谁的百分比
    1.分析
    1.子元素height/width的百分比
    相对于直接父元素
    2.top/bottom/left/right
    相对于直接非static定位的父元素
    3.padding/margin
    无论垂直还是水平,相对于直接父元素的width,与height无关
    4.border-radius
    相对于自身的width
    2.缺点
    1.计算困难,需要换算成百分比单位
    2.都使用百分比,相对父元素不是唯一的
    4.rem
    1.rem是一个灵活的、可扩展的单位,由浏览器转化像素并显示
    rem无论嵌套层级如何,都只相对浏览器的根元素的font-size
    2.当页面size发生变化,只需要改变font-size的值,那么以rem为固定
    单位的元素的大小也会发生变化
    3.rem2px和px2rem
    1.rem2px表示从rem转为px
    2.px2rem表示从px转为rem
    1.一个一个转为rem
    2.还是用px来表示,最后将所有px转化为rem
    1.重点在于预处理以px为单位的css文件
    1.webpack loader
    引入一个px2rem-loader
    2.webpack中使用postcss plugin
    4.缺点
    必须通过JS来动态控制根元素的font-size
    也就是css样式和js代码有一定的耦合性,且必须将修改font-size样式的代码放在css样式之前
    5.vw/vh
    1.CSS3引入了一个新的单位vw/vh,与视图窗口有关
    vw表示相对于视图窗口的宽度,视图宽度为100vw
    vh表示相对于视图窗口的高度,视图高度为100vh
    %:相对于祖先,相对于自己
    vw/vh:相对于视窗的尺寸
    2.vw单位换算
    确定视图的窗口大小,比如iphone6的375*667分辨率
    1px = (1/375) * 100 vw
    也可以通过postcss-px-to-viewport插件
    3.兼容性
    ie9-11不支持vmin/vmax
    opera不支持vw单位

    展开全文
  • 逐渐流行的移动端布局单位。和rem同理,设计图量出来是多少,除以7.5+vw单位。但由于不好计算,通过安装px2vw插件。优势在于不用引入js代码。从而优化网页打开速度,给用户带来更好的体验。注意:vw单位依靠vw,不...
  • 文章目录前言一、web移动端是什么?二、如何调试移动web网页1.真机调试:2.chrome浏览器调试...移动端是前端攻城狮一定要会的知识点,这里我将会初步介绍什么是web移动端以及他常用的布局 一、web移动端是什么? 运行在
  • 固定定位布局 键盘挡住输入框内容 1、通过绑定窗口改变事件,监听键盘的弹出。然后去改变固定定位元素的位置。默认键盘的宽度应该是页面的2分之一。所以我们位移的距离改成键盘的二分之一就可以了 window.onresize ...
  • 1.移动端基础 1.1浏览器现状 *国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android开发的一样 *兼容移动端主流浏览器,处理Webkit...
  • 移动端布局的4种方法

    2020-07-02 19:19:05
    移动端布局主要分为四类,分别是流式布局,rem布局,响应式布局和弹性布局 流式布局 使用非固定像素来定义网页内容,也就是百分比布局,通过合资的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不收固定像素的...
  • 甚至好多前端主要的工作内容就是开发移动端,因为移动端的内容五花八门:微信小程序、支付宝小程序、京东小程序、快应用、微信公众平台、微信小游戏、混合App、H5等… 打开招聘软件,可以看到目前的岗位对前端的要求...
  • web移动端布局方法

    千次阅读 2019-04-02 15:37:38
    移动端布局分类 移动端的布局主要分为四类,分别是流式布局,rem布局,响应式布局和弹性布局。 流式布局(百分百布局): 定义: 使用非固定像素来定义网页内容,也就是百分比布局,通过盒子的宽度设置成百分比...
  • css实现移动端布局

    千次阅读 2019-11-02 14:53:51
    目录 弹性盒 固定定位 弹性盒 //1.body,html body,html{ height:100%; } //2.外面最大的盒子,如果没有,就是body body{ display:flex;flex-direction:column } //3.头部 header{ height:100px;...//4....footer{ h...
  • 移动端布局的设置,以及几种移动端布局方式:流式布局、弹性布局、rem布局、响应式布局,初入less语法
  • 关于移动端布局和pc端写法

    千次阅读 2018-05-25 17:52:02
    一:移动端准备工作&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;&lt;meta http-equiv="X-UA-...
  • 2.视口--理想视口(理想的布局视口、在移动设备中指设备的分辨率===>给定设备物理像素的情况下,最佳的布局视口)1css 像素 = 物理像素/分辨率 在meta标签中会将width设置为decive-width,即将布...
  • 1. 响应式开发 1.1 响应式开发原理 就是通过媒体查询针对不同的宽度的设备进行布局和样式的设置,从而适配不同的设备 ...响应式需要一个父级作为布局容器,根据布局容器的宽度来修改页面的样式和布局 平时我们
  • 1.移动端基本环境 viewport视口(可视区窗口) 默认不设置viewport一般可视区宽度在移动端是980 width可视区的宽度(number||device-width) user-scalable是否允许用户缩放(yes||no)iOS10无效(我们放在事件章节解决...
  • 1. px 像素,相对于屏幕分辨率而言   2. em 相对于父元素字体大小放到缩小多少倍  1em = 16px  注:由于元素字体大小不固定,所以不推荐使用em ... 注:是rem布局方案中用到最主要的一个单位   4. vw ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,488
精华内容 20,995
关键字:

移动端布局