移动端布局_移动端布局自适应方案 - CSDN
精华内容
参与话题
  • 移动端开发常用布局

    千次阅读 2019-08-03 14:28:09
    移动web常用布局知识 在移动web中常用的布局有四种 流式布局(百分比布局) Flex布局(弹性布局) 响应式布局 rem布局 一、流式布局(百分比布局) 所谓的流式布局就是我们常说的百分比布局,页面中盒子的...

    移动web常用布局知识

    在移动web中常用的布局有四种

    1. 流式布局(百分比布局)
    2. Flex布局(弹性布局)
    3. 响应式布局
    4. rem布局

    一、流式布局(百分比布局)
     

    所谓的流式布局就是我们常说的百分比布局,页面中盒子的宽度常常是通过百分比值来设置的。

    流式布局的特征:

    a、宽度自适应,高度写死,并不是百分百还原设计图

    b、图标都是固定死大小的,包括字体等也是固定死的。并不是所有的东西都是自适应的。

    c、一些大的图片,设置宽度为百分比自适应即可,随着屏幕大小进行变化

     

    经典的流式布局

    //1. 左侧固定,右侧自适应
    //2. 右侧固定,左侧自适应
    //3. 两侧固定,中间自适应(圣杯布局,双飞翼布局)
    //4. 等分布局

    流式布局的缺点

    虽然可以让各种屏幕都适配,但是显示效果不是非常的友好,因为只有几个尺寸的手机能够完美的显示出来视觉设计师和交互最想要的效果。但是目前使用流式布局的公司非常多,比如 亚马逊 、京东 、携程

    假如设计给你一张640的设计图,你使用流式布局设计出来的页面在640的屏幕上可以完美的显示,但是如果在别的屏幕上显示的时候就会有拉伸的现象,这样就想的不那么完美。

    案例1

    在流式布局中我们需要配合浮动来实现以下效果,比如下图的效果

    要实现这样的效果,如果我们使用流式布局来写,代码如下,可以看到,我调整了div的位置,以便右浮的div可以正常显示在右边,这样尽管实现了效果,但是可阅读性上相对来说差一点。

    <!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>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .father{
                height: 100px;
                background-color: pink;
            }
            /* 两边固定,中间自适应 */
            .left{
                width: 100px;
                height: 100px;
                background-color: lime;
                float: left;
            }
            .right{
                width: 100px;
                height: 100px;
                background-color: skyblue;
                float: right;
            }
            .middle{
                height: 100px;
                background-color: hotpink;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="left"></div>
            <div class="right"></div>
            <div class="middle"></div>
        </div>
    </body>
    </html>

    二、Flex布局(弹性布局)
     

    怎么实现Flex布局呢?

    给一个盒子设置了display:flex ,那么这个盒子就有了Flex的特性

    Flex特性

    这个盒子就有了主轴侧轴 的概念。

    主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向

    侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的

    方向:默认主轴从左向右 ,默认侧轴从上到下

    接下来我们来说一下,Flex布局中特有的一些css属性,已经使用

    flex-direction

    flex-diretion主要是用来调整主轴的方向的,默认是水平方向

    可选值

    row:主轴方向为水平向右 
    
    column:主轴方向为竖直向下 
    
    row-reverse:主轴方向为水平向左 
    
    column-reverse:主轴方向是竖直向上。

    justify-content(重点)

    justify-content主要用来设置主轴方向的对齐方式 

    可选值:

    flex-start: 弹性盒子元素将向起始位置对齐 
    
    flex-end: 弹性盒子元素将向结束位置对齐。 
    
    center: 弹性盒子元素将向行中间位置对齐 
    
    space-around: 弹性盒子元素会平均地分布在行里 
    
    space-between:第一个贴左边,最后一个贴右边,其他盒子均分,保证每个盒子之间的空隙是相等的

    align-items(重点)

    align-items用于调整侧轴的对其方式 
    
    flex-start: 元素在侧轴的起始位置对其。 
    
    flex-end: 元素在侧轴的结束位置对其。
    
    center: 元素在侧轴上居中对其。
    
    stretch: 元素的高度会被拉伸到最大(不能给死高度)。

    flex-wrap

    flex-wrap属性控制flex容器是单行或者多行,默认不换行

    nowrap: 不换行(默认),会压缩子盒子的宽度。
    
    wrap: 当宽度不够的时候,会换行。

    align-content

    align-content用来设置多行的flex容器的排列方式

    flex-start: 各行向侧轴的起始位置堆叠。 
    flex-end: 各行向弹性盒容器的结束位置堆叠。
    center: 各行向弹性盒容器的中间位置堆叠。
    space-between: 各行在侧轴中平均分布。 
    space-around: 第一行贴上边,最后一个行贴下边,其他行在弹性盒容器中平均分布。 
    stretch:拉伸,不设置高度的情况下。
    align-items与align-content的区别
    
        align-items调整的是侧轴的对其方式,不换行一般用align-items
        align-content:必须是多行才生效,如果单行,没有效果。换行了就用align-content。
    
    
    

    flex属性

    上述讲的属性都是给父盒子设置的,接下来的几个属性是给子盒子设置的。

    flex属性用来设置子盒子如何分配主轴剩余空间

    flex:1

    align-self

    align-self也是用于设置在侧轴的位置,但是align-self给子元素设置,优先级比align-items的优先级高。

    取值与align-items的取值一样。

     

    Flex布局的一些属性介绍完了,接下来我们来实现与流式布局同样的案例

    案例2

    <!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>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .father{
                height: 100px;
                background-color: pink;
                display: flex;
            }
            /* 两边固定,中间自适应 */
            .left{
                width: 100px;
                height: 100px;
                background-color: lime;
            }
            .right{
                width: 100px;
                height: 100px;
                background-color: skyblue;
            }
            .middle{
                height: 100px;
                background-color: hotpink;
                flex: 1;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="left"></div>
            <div class="middle"></div>
            <div class="right"></div>
        </div>
    </body>
    </html>

    对比Flex的和流式布局的代码,可以发现,使用flex布局的代码简单了很多,我们不需要使用浮动,同样的我们也不需要调整页面标签的位置,当然Flex布局还是有一些局限的,我们正常开发中不会整个页面都是Flex来布局,某个模块可以使用Flex布局。

    三、响应式布局

     

    为什么要有响应式布局?

    • 在移动互联日益成熟的时候,在PC端开发的网页已经无法满足移动设备的要求。

    • 通常的做法是针对移动端单独做一套特定的版本。

    • 如果终端越来越多,那么需要开发的版本就会越来越多(大屏设备的普及)

    • 响应式布局 :一个网站能够兼容多个终端(节约开发成本)

    优点:

    面对不同分辨率设备灵活性强

    能够快捷解决多设备显示适应问题

    缺点:

    兼容各种设备工作量大,效率低下

    代码累赘,会出现隐藏无用的元素,加载时间加长

    其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

     

    在响应式布局已经后面的rem布局中,媒体查询是起着非常重要的作用的。

    媒体查询

    媒体查询(Media Query)是CSS3提出来的一个新的属性,通过媒体查询可以查询到screen的宽度,从而指定某个宽度区间的网页布局。 下表中的(lg 、md、sm、xs)在后面的栅格系统中会涉及到,须记住。

    设备分类
    分类 宽度范围
    大屏设备 lg >1200px
    中屏设备 md 992px~1200px
    小屏设备 sm 768px~992px
    超小屏设备 xs < 768px

    媒体查询的语法

    /*查询屏幕*/
    @media screen and 条件 {
    }
    
    /*省略写法*/
    @media 条件 and 条件 {
    }
    
    /*条件的写法*/
    /*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
    /*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
    
    @media screen and (min-width: 992px) and (max-width: 1200px) {
      .container {
        width: 970px;
        background-color: blue;
      }
    }

    在开发响应式布局中,我们常用到的一个框架就是bootstrap(http://www.bootcss.com

    特点:

    • 组件简洁大方、代码规范精简、界面自定义性强。

    • Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。

    • Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。

     

    优点:

    • 有自己的生态圈,不断的更新迭代

    • 提供了一套简洁、直观、强悍的组件

    • 标准化的HTML+CSS编码规范

    • 让开发更简单,提高了开发效率。

    • 扩展性强,虽然界面组件样式已经定义好了,我们还可以自定义,修改默认样式。

     

    简单说一下bootstrap的几个常用类

    1、container

    类用于固定宽度并支持响应式布局的容器 ,默认带了15px的padding值。 根据不同的屏幕大小,会有不同的版心,container的这个实现原理就是上面说的媒体查询,不同的屏幕大小,设置不同的版心宽度。直接像这么使用就行。

    <div class="container">
      ...
    </div>

    栅格系统

    栅格系统,也叫网格系统

    栅格系统常用类(总共12列)
    类名 例子 解释
    .col-xs-xx .col-xs-6 在超小屏幕(及以上)生效
    .col-sm-xx .col-sm-6 在小屏幕(及以上)生效
    .col-md-xx .col-md-6 在中屏幕(及以上)生效
    .col-lg-xx .col-lg-3 在大屏幕及生效,占1/4
    .col-lg-xx .col-lg-4 在大屏幕及生效,占1/3
    .col-lg-xx .col-lg-5 在大屏幕及生效,占1/2

    列的偏移(下图摘取自bootstrap官网)

    响应式工具

    在响应式布局中,当界面缩小时我们会隐藏某些不重要的模块,在bootstrap中同样提供了这么几个类工具

    hidden-xs 在超小屏时隐藏

    hidden-sm在小屏时隐藏

    hidden-md在中屏时隐藏

    hidden-lg在大屏时隐藏

     

    案例3 

    响应式页面案例

     

    四、rem布局

     

    前面已经说了三种在移动端常用的布局,但是上面三种布局存在一些缺点,导致我们移动web页面不是那么完美。

    在说rem布局之前,我们先来说一下less

    什么是less?

    Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性

    less仅仅是写css的另一种方式,写出来的less文件浏览器也不识别,所以啊,我们写完了less文件,还需要通过less解析器解析成css,最终浏览器引入的还是css文件。

    官网http://lesscss.org/ 

    中文网http://lesscss.cn/

    less是完全兼容css的,所以你可以在less中直接写css,但是就显得有点low了 ,哈哈哈~~

    less中是允许嵌套、设置变量、运算等的,具体可以查看上面响应式布局案例中的less文件。

     

    为什么我们会先说less呢?

    因为在rem中我们会涉及到一下计算,而css中是不支持运算符的,因此如果我们纯粹的用css去写rem布局的东西,会需要大量计算,会很麻烦,而我们如果在less中写的话就不会有这样的问题了,因为less支持运算符。

     

    rem是什么?

    rem(font size of the root element)是指相对于根元素的字体大小的单位。它就是一个相对单位。

    em(font size of the element)是指相对于当前元素的字体大小的单位。它也是一个相对单位。

    它们之间其实很相似,只不过计算的规则一个是依赖根元素,一个是当前元素计算。

    html{
      font-size:16px;
    }
    body {
      font-size:20px;
    }
    div.em {
      /*em的计算方式参照的当前元素的font-size,如果不设置,默认继承自父盒子*/
      width:2em;
      height:2em;
      background-color:red;
    }
    /*rem的计算方式参照的是html的font-size*/
    div.rem {
      width:2rem;
      height:2rem;
      background-color:blue;
    }

    为什么要用rem?

    rem的主要目的就是解决用于不同屏幕的适配问题。rem能够等比例的适配所有的屏幕。

    因为rem的基准点是根元素html的字体大小,因此我们只需要设置不同屏幕的html的font-size大小不一样就可以达到不同屏幕的适配了。

    不是说rem布局毫无缺点,rem布局在某些时候,比如设置的字体一般取值是9-72px ,当界面缩的很小时就会发现文字还是挺大的,会超出我们设置的边框。当然rem总的来说是很强大的,之后的开发中使用的也是很多的。

     

    使用rem配合媒体查询可以适配多个终端

    @media (min-width: 320px) {
      html {
        font-size: 16px;
      }
    }
    
    @media (min-width: 360px) {
      html {
        font-size: 18px;
      }
    }
    @media (min-width: 384px) {
      html {
        font-size: 19.2px;
      }
    }
    
    @media (min-width: 414px) {
      html {
        font-size: 20.7px;
      }
    }

     一下这段代码就是结合了less的运算、变量、函数创建的一个媒体查询函数。

    //适配主流浏览器
    //320 360 375 384 400 414 424 480 540 720 750
    //把屏幕分成15rem
    .adapter(@screen:320px) {
      @media (min-width: @screen) {
        html {
          font-size: round(@screen/15, 2);
        }
      }
    }

    案例4

    rem小案例

    展开全文
  • 移动端布局的几种方式

    千次阅读 2019-06-07 12:57:21
    rem适配原理 <script> (function(doc, win, designWidth) { const html = doc.documentElement; const refreshRem = () => { const clientWidth = ... if (clientWid...

    在这里插入图片描述

    rem适配原理

    <script>
    			(function(doc, win, designWidth) {
    				const html = doc.documentElement;
    				
    				const refreshRem = () => {
    					const clientWidth = html.clientWidth;
    					if (clientWidth >= designWidth) { //给宽度一个最大值,如果设备的宽度已经超过设计稿的尺寸了,统一按一个值去算(传的第三个参数)
    						html.style.fontSize = '100px';
    					} else {
    						//html.style.fontSize= 16 * clientWidth / 375 + 'px';
    						html.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
    					}
    				};
    				
    				//dom加载完的一个事件
    				doc.addEventListener('DOMContentLoaded', refreshRem);
    			})(document, window, 750);
    		</script>
    
    展开全文
  • 移动端布局终极解决方案 --- 让移动端布局开发更加容易
  • 前言 眼看着做两顿凉皮的功夫,2020第一季度就要过完了。 过去的三个月,好像经历了很多,又好像什么都没留下。 这种茫然的背后,是我们特殊时期害怕被淘汰的一种自我审视。看到百度数据显示,疫情期间日均超3.5亿...

    前言

    眼看着做两顿凉皮的功夫,2020第一季度就要过完了。
    过去的三个月,好像经历了很多,又好像什么都没留下。
    

    这种茫然的背后,是我们特殊时期害怕被淘汰的一种自我审视。看到百度数据显示,疫情期间日均超3.5亿人次搜索、浏览教育相关的内容,同比上涨86%。 在这个人人都准备抓住机会弯道超车的时期,你准备学点什么?现在就冲!和博主一起学前端吧。

    截至发表博文前的最新数据:
    在这里插入图片描述
    那么我们正式步入正题吧,为了方便大家查阅,我把页面效果,部分源代码,以及我整理的学习笔记,以文本和xmind的格式导出了,如有需要,可以私信。

    1.移动端基础

    浏览器现状
    	国内的UC和QQ等手机浏览器都是根据webkit修改过来的内核,国内尚无自主开发的内核。
    

    先放上思维导图的自己的笔记:在这里插入图片描述
    视口
    1.定义:
    浏览器显示页面内容的屏幕区域。视口可以分为布局视口,视觉视口和理想视口。
    2.分类
    布局视口
    一般移动设备的浏览器都默认设置了一个布局视口
    视觉视口
    网站的区域
    理想视口
    为了使网站在移动端最有理想的浏览和阅读宽度而设定,需要添加meta标签

    二倍图
    1.物理像素和物理像素比
    物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。开发时的1px不一定等于1个物理像素
    2.背景缩放background-size
    3.单位 : 长度|百分比|cover|contain;
    4.多倍图切图 cutterman

    移动端开发选择
    1.单独制作 (主流)
    通常情况下,网址域名前加m可以打开移动端
    2.响应式页面(其次)
    通过判断屏幕的宽度来改变样式,需要花费精力去调整兼容性

    移动端技术解决方案
    CSS初始化 normalize.css
    css盒子模型 box-sizing
    清除高亮-webkit-tap-highlight-color:transparent;
    取消外观-webkit-appearance:none;
    禁用长按页面时弹出菜单img,a{-webkit-touch-callout:none;}

    移动端常见布局
    移动端技术选型
    1.主流
    流式布局(百分比布局)
    less+rem+媒体查询布局
    flex弹性布局(强烈推荐)
    混合布局
    2.其次
    媒体查询
    bootstarp
    案例:

    京东移动端首页

    		二倍精灵图做法
    			在fw里面把精灵图等比例缩放为原来的一半
    			之后根据大小 测量坐标
    			注意代码里面的background-size也写:精灵图原来宽度的一半
    		图片格式
    			DPG图片压缩技术
    				京东自主研发的技术,该技术可直接节省用户近50%的浏览量,极大的提升了网页打开速度,能够兼容jpeg。
    			webp图片格式
    				谷歌开发的一种旨在加快图片加载速度的图片格式,图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间
    

    效果如图所示:
    在这里插入图片描述
    以下为部分源代码:在这里插入图片描述

    2.flex布局

    刚刚京东案例的是流式布局,以下为流式布局。
    在这里插入图片描述
    1.体验flex布局
    传统布局:
    1.兼容性好
    2.布局繁琐
    3.局限性
    flex弹性布局
    操作方便,移动端应用很广泛
    pc端情况差
    IE 11或更低版本很难支持

    2.flex布局原理
    定义
    flexible box弹性布局,任何一个容器都可以指定为flex布局
    容器和项目 例如div里面放个span
    注意点
    当我们为父元素设置flex,子元素的float,clear,vertical-align属性将失效
    子容器可以横向排列也可以纵向排列
    总结
    通过给父盒子添加flex,来控制子盒子的位置和排列方式

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

    align-self:控制子项目在侧轴上的排列方式,允许某单个子项目与其他项目有不一样的对齐方式,可覆盖align-items属性,默认为继承父。
    order:定义项目的排列顺序,属性越小,排列越靠前,默认为0,和z-index不一样。
    

    4.父项常见属性
    flex-direction:
    设置主轴的方向

    	属性值
    		row从左到右
    		row-reverse
    		column从上到下
    		column-reverse
    

    justify-content
    设置“主轴”的子元素的排列方式

    	属性值
    		flex-start从头部开始
    		flex-end尾部开始
    		center主轴居中对齐
    		space-around平分剩余空间
    		space-between先两边贴边,再平分剩余空间
    

    flex-wrap
    设置子元素是否换行wrap/nowrap
    flex默认子元素不换行,如果装不开,会缩小子元素的宽度,放到父元素里
    align-content:
    设置侧轴上的子元素的排列方式(多行)

    	属性值:
    		justify都有且有stretch
    

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

    	属性值:
    		flex-start
    		flex-end
    		center
    		stretch拉伸
    

    flex-flow:
    相当于同时设置1和3 例如:flex-flow:row wrap;
    项目实战:在这里插入图片描述
    部分源码:
    在这里插入图片描述

    3.rem布局

    思维导图如下:
    在这里插入图片描述
    由于rem布局笔记较多,暂无md版本,直接展示案例效果图:在这里插入图片描述
    时间关系,li中内容暂未修改。
    在这里插入图片描述

    4.响应式布局

    这是最难也是最好用的布局格式。
    

    在这里插入图片描述
    网页案例的笔记和制作过程我会慢慢更新。
    效果如图:在这里插入图片描述
    在这里插入图片描述
    四种布局已经介绍完毕,总结出来才感到,也算没有白学什么,至少收获还是有的。

    写在最后

    分享一句有趣的名言:

    人生没有捷径,一个人的贵人往往就是自己。愿你我都能选择做生活的强者,
    身披铠甲,无惧挑战,愈战愈勇,努力向前。
    

    一起努力。

    展开全文
  • web移动端布局方法

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

    移动端布局分类

    移动端的布局主要分为四类,分别是流式布局,rem布局,响应式布局和弹性布局。

    • 流式布局(百分百布局):

    • 定义:
      使用非固定像素来定义网页内容,也就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固 定像素的限制,内容向两侧填充。

    • 优点:
      px(绝对单位)做css单位,这样的布局可以适配移动端不同的分辨率设备,在大屏小屏自动适应,特别适合于电商网站的布局等简单的页面,比如说列表页,写法比较简单,不用考虑太多,

    • 缺点:
      -页面虽然展示正常,却不是等比缩放,在高清屏上难免看起来怪怪的(px换算统一除以2,在dpr是2.5或者3上看起来偏小)

    • rem布局

    • 定义:
      rem:css(相对单位,相对于网站根元素,即根据html元素的font-size来计算大小,比如说html的font-size大小为50px,一个div的width为1rem,则div的width大小为50px,所以在不同屏上,只要我们动态的算出html的大小,则可起到一改俱改的效果,实现等比例放大缩小,因为html的font-size是等比算出来的.

    • 注意:
      用rem布局,可以起到等比例放大缩小的效果,但有时我们难免要对某个元素在不同屏上做一些特定的处理,我们马上就想起了媒体查询,是的,你如果单纯用rem布局,没有去动态修改viewport的缩放值,那是可以用媒体查询的,那么除了用媒体查询还有没有其他方法呢?答案是有的,根据dpr,我们在不同屏动态算出html的font-size时,顺便把dpr算出来加到html里面去,这样我们可以通过css去控制

    • 局限条件:
      主要用来适配手机和ipad,除了手机和ipad,其他的都不能适配。

    • rem布局中的尺寸计算
      本质是等比缩放,一般是基于宽度,试想一下假设UE图能等比缩放,假设我们将屏幕宽度平均分成100份,每一份用x表示,x=屏幕宽度/100,如果将x作为单位,x前面的数值就代表屏幕宽度的百分比。

    • 案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          /*目标:就是把box适配到常见的iphone5 三星 iphone6手机上*/
          /*1.通过切图工具,我们得知 box在设计图(640px)上的大小是16*16px */
          /*2.把设计图分成20份 1份=32px*/
          /*3.iphone5的宽度=320  iphone6的宽度=375  这里指的是设备独立像素*/
          /*4.使用媒体查询*/
          @media screen and (width: 320px){
              html {
                  /*在320宽的屏幕中 一份是16px*/
                  font-size: 16px;/*320/20=16*/
              }
          }
          /*三星*/
          @media screen and (width: 360px){
              html {
                  /*在360宽的屏幕中 一份是18px*/
                  font-size: 18px;/*360/20=18*/
              }
          }
          @media screen and (width: 375px){
              html {
                  /*在375宽的屏幕中 一份是18.75px*/
                  font-size: calc(375px/20);/*375/20=18.75*/
              }
          }
          .box {
              /* 在某一屏幕中的大小=元素的尺寸/32 * 屏幕中一份的大小,即16/32*18或16/32*16,就能得到px为单位的*/
              width: 0.5rem;
              height: 0.5rem;
              background-color: red;
          }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>
    
    • 响应式布局(使用媒体查询这个工具实现)
    • 定义:
      简而言之,就是一个网站能够兼容多个终端。CSS3中的 Media Query(媒介查询),通过查询 screen 的宽度来指定某个宽度区间的网页布局。它主要是通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。
    • 核心语法:
    @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
      /*你的css代码*/
    }
    
    • 案例:
    @media screen and (width: 320px){
              body {
                  background-color:red
              }
    }
    @media screen and (width: 375px){
              body {
                  background-color:green
              }
    }
    
    • 第三方框架使用
      由于响应式开发显得繁琐些,一般使用第三方响应式框架来完成,比如bootstrap来完成一部分工作,当然也可以自己写响应式。

    bootstrap中常用类名:

    1. col-xs-*超小屏幕(移动设备) 768px以下
    2. col-sm-*小屏设备 768px-992px
    3. col-md-*中等屏幕 992px-1200px
    4. col-lg-*宽屏设备 1200px 以上
    • 弹性布局
    • 定义:
      高度定死,宽度自适应,元素都采用px做单位。随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在那个宽度需要调整的时候使用响应式布局就行(比如网易新闻),这就实现了适配。
    • viewport固定值:
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    
    展开全文
  • 移动端布局

    2020-10-15 02:07:27
    视图设定
  • 移动端布局方式大类

    2020-10-08 22:28:59
    移动端布局方式 大体分为两种,第一种是重新根据手机屏幕建立新的页面,第二种是将原来pc端页面变成响应式的(通过媒体查询,根据屏幕大小来改变内容大小及布局) 一、新创建 1.流式布局 百分比布局 对盒子给一个...
  • 移动端有哪些常见布局方式?

    万次阅读 2018-06-05 10:44:37
     今天给大家分享一下,修真院官网css任务13,深度思考中的知识点——移动端有哪些常见布局方式? 1.背景介绍 随着智能手机的普及以及社会的发展,传统的网站布局已经无法适应现状,我们编写的网页不仅仅要展示在...
  • 移动端几种布局总结

    2020-07-12 20:46:36
    移动端布局方法移动端布局方法1、使用 媒体查询+rem单位2、使用vw单位 + rem单位布局3、使用rem.js + rem单位布局4、使用sass + vw单位布局下面具体说下2、3、4布局2:VW和rem布局总结如下计算:3、使用rem.js + rem...
  • 有部分改动和我的总结笔记 常见的页面布局方式有, 静态布局 px布局 流式布局(Liquid Layout) 主要的划分... 自适应布局(Adaptive Layout) 即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围 ...
  • css3移动端布局

    2019-05-20 23:00:18
    一、移动端相关概念 1.屏幕尺寸 屏幕尺寸是指屏幕对角线的长度,单位为英寸,1英寸=2.54厘米 常见移动端设备屏幕尺寸 iphone4 3.5英寸 iphone6,6s,7,8 4.7英寸 iphone6,7,8plus 5.5英寸 2.屏幕分辨率 屏幕分辨率是指...
  • 目标: 前端开发移动端及H5时候,不需要再关心移动设备的大小,只需要按照固定 设计稿的px值布局 基础知识 dpr(设备像素比) css的像素px不等于设备像素/分辨率/各种值,css的px可以简单理解为虚拟 像素,与设备...
  • pc端,移动端,客户端的区别

    万次阅读 2018-08-07 09:21:37
    pc端与移动端的区别 1、从兼容方面来说,pc考虑的是...3、从布局上来说,移动端一般要做到布局自适应 4、从动画处理上,pc端由于要考虑IE的兼容性,通常使用js做动画,而移动端一般用css 5、在框架选择中,一般pc...
  • 移动端屏幕适配(Rem+js方法)

    万次阅读 2018-08-02 21:50:33
    1.什么是移动端适配 在制作webapp时,一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样。 也就是说用同一套代码在不同分辨率的手机上跑时,页面元素间的间距、留白,以及图片...
  • 移动端与pc端公用一个域名

    千次阅读 2015-12-07 17:51:00
    移动端与pc端公用一个域名 移动端与pc端采用两种布局和样式,但是公用一个域名。 当在pc端浏览网页时,采用pc端的样式加载页面,当在移动端浏览网页时,则直接跳转到移动端页面,域名不变(设备自适应网页...
  • 通过媒体查询可以为不同大小和尺寸的媒体...即响应式布局 @media screen and (min-width: 400px) and (max-width: 700px) { … } @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
  • 移动端自适应解决方法小结

    千次阅读 2018-02-27 10:18:24
    百分比布局按照父布局的宽高进行百分比分隔,以此来确定视图的大小。但是要想设置当前容器的高度或宽度百分比,必须“明确”知道父容器的高度或宽度。一般都是对宽度进行百分比的设置,高度使用内容撑起但是有明显的...
  • 这几天做了关于移动端的一些页面,发现了一些问题,在这记录下,备用也供大家参考下1:移动端通过%布局,当页面出现键盘时,页面高度改变从而会压缩整个页面(1) var viewHeight = window.innerHeight; $(document...
  • 2、PC端和移动端的差别 (1)用户交互方式不同:表现在鼠标、手指 (2)呈现的数据量不同: PC端——屏幕大、内容多 移动端——内容少 (3)用户体验上不同 移动端——用户会注意“流量”,即要求代码的体积要...
  • HTML移动端页面重构布局8大方法

    万次阅读 2018-07-27 18:37:59
    1.固定布局  方法 &lt;head&gt;里把&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"&gt;加好,然后根据设计稿...
1 2 3 4 5 ... 20
收藏数 41,187
精华内容 16,474
关键字:

移动端布局