精华内容
下载资源
问答
  • 响应式布局自适应布局详解

    千次阅读 2019-06-26 17:02:24
    响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较...

    响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。

    自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小,但仍然也算做差异。它使得把握设计最终效果变得更难,同样让响应式布局更加的难以测试和预测。但同时说难,这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中,你也会因此更好的掌握一些基础知识。当然,要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的,但是你至少可以很轻松的确定它是能够正常工作的,因为页面的基本特性和布局结构都是根据语义结构来部署的。

    响应式布局概念

    Responsive design,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

    响应式设计

    经过不停地学习和实践,如今总结响应式设计的方法和注意点。其实很简单。

    响应式设计的步骤

    1. 设置 Meta 标签

    大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

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

    [1](user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 )

    3. 通过媒介查询来设置样式 Media Queries

    Media Queries 是响应式设计的核心。

    它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px,那么可以这样写:

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

    这里的样式就会覆盖上面已经定义好的样式。

    4. 设置多种试图宽度

    假如我们要设定兼容 iPad 和 iphone 的视图,那么可以这样设置:

    /** iPad **/
    @media only screen and (min-width: 768px) and (max-width: 1024px) {}
    /** iPhone **/
    @media only screen and (min-width: 320px) and (max-width: 767px) {}

    恩,差不多就这样的一个原理。

    一些注意的

    1. 宽度需要使用百分比

    例如这样:

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

    2. 处理图片缩放的方法

    • 简单的解决方法可以使用百分比,但这样不友好,会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了,就缩小。假如图片小了,就原尺寸输出。
    img { width: auto; max-width: 100%; }
    • ::before::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情,在 css3 中,任何元素都可以使用 content 属性了,这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能: HTML结构:
    <img src="image.jpg"
         data-src-600px="image-600px.jpg"
         data-src-800px="image-800px.jpg"
         alt="">

    CSS 控制:

    @media (min-device-width:600px) {
        img[data-src-600px] {
            content: attr(data-src-600px, url);
        }
    }
    
    @media (min-device-width:800px) {
        img[data-src-800px] {
            content: attr(data-src-800px, url);
        }
    }

    3. 其他属性

    例如 pre ,iframevideo 等,都需要和img一样控制好宽度。对于table,建议不要增加 padding 属性,低分辨率下使用内容居中:

    table th, table td { padding: 0 0; text-align: center; }
    
    以上内容和代码来自:掌心,感谢,欢迎查看我之前做过的响应式设计:查看演示

    更多资源

    Morten Hjerde和他的同事们对2005至2008年市场中的400余种移动设备进行了统计(查看报告),下图展示了大致的统计结果:

    打造布局结构

    我们可以监测页面布局随着不同的浏览环境而产生的变化,如果它们变的过窄过短或是过宽过长,则通过一个子级样式表来继承主样式表的设定,并专门针对某些布局结构进行样式覆写。我们来看下代码示例:

    /* Default styles that will carry to the child style sheet */
    html,body{
       background...
       font...
       color...
    }
    h1,h2,h3{}
    p, blockquote, pre, code, ol, ul{}
    /* Structural elements */
    #wrapper{
        width: 80%;
        margin: 0 auto;
        background: #fff;
        padding: 20px;
    }
    #content{
        width: 54%;
        float: left;
        margin-right: 3%;
    }
    #sidebar-left{
        width: 20%;
        float: left;
        margin-right: 3%;
    }
    #sidebar-right{
        width: 20%;
        float: left;
    }

    下面的代码可以放在子级样式表Mobile.css中,专门针对移动设备进行样式覆写:

    #wrapper{
        width: 90%;
    }
    #content{
        width: 100%;
    }
    #sidebar-left{
        width: 100%;
        clear: both;
        /* Additional styling for our new layout */
        border-top: 1px solid #ccc;
        margin-top: 20px;
    }
    #sidebar-right{
        width: 100%;
        clear: both;
        /* Additional styling for our new layout */
        border-top: 1px solid #ccc;
        margin-top: 20px;
    }

    大致的视觉效果如下图所示:

    图中上半部分是大屏幕设备所显示的完整页面,下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下:

    Media Queries

    Ethan的文章中的“Meet the media query”部分有更多的范例及解释。更有效率的做法是,将多个media queries整合在一个样式表文件中

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */
    }
    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }
    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }
    展开全文
  • 静态布局、流式布局、自适应布局、弹性布局、响应式布局 前端的布局主要有: 静态布局、流式布局、自适应布局、弹性布局、响应式布局等。 一、静态布局: 尺寸上一律使用px;同时限制外层容器的大小;中间的宽度有...

    静态布局、流式布局、自适应布局、弹性布局、响应式布局

    前端的布局主要有:
    静态布局、流式布局、自适应布局、弹性布局、响应式布局等。

    一、静态布局:

    尺寸上一律使用px;同时限制外层容器的大小;中间的宽度有最大(max-width)最小(min-width)限制,如果屏幕宽度大于max-width,那就两边自适应,如果屏幕宽度小于min-width,那就会出现x轴方向的滚动条。

    优点:不存在浏览器兼容的问题。

    缺点:pc端和移动端不好共用一套代码。需要做两套一套pc一套移动端。

    应用场景:主要是在pc端使用。如:百度pc门户页面。

    二、流式布局:

    流式布局又称为百分比布局。随着屏幕的变化,页面的布局没有发生大的变化,进行适配调整,如栅栏,各模块之间使用了百分比。可以理解为静态布局的升级版,流式布局 = 静态布局 + 百分比布局;

    优点:元素的宽高用百分比做单位,元素宽高随分辨率调整,布局变化不大。

    缺点:屏幕尺度跨度过大的情况下,px部分不变化,百分比部分变化大,会显得页面展示非常不协调。

    应用场景:左侧固定+右侧自适应、左右固定宽度+中间自适应,也主要用在pc端。

    三、自适应布局:

    通过@media媒体查询,设置不同分辨率下设置对应的样式,可以理解为500~800是一种样式的展示,800~1000又是一种样式的展示,1000~1200又是一种样式设置。

    优点:可以在已知的范围内实现对应屏幕的自适应。

    缺点:对于未知的宽度不能自适应。

    应用场景:pc和移动都可以使用

    四、弹性布局(flex):

    css3引入的布局方式

    优点:方便、简单

    缺点:存在兼容性问题。

    应用:对于pc端的整体布局应用的不多,适合用在pc布局的局部,主要是用在移动端整体布局。

    五、响应式布局:

    响应式布局 = 自适应布局 + 流式布局 ;主流的做法是通过js计算根节点的rem来实现在不同屏幕下实现响应式布局,可以理解为自适应布局的精细版本。是目前最优秀的布局。

    优点:适配pc和移动端,

    缺点:对于一些屏幕情况需要特殊的处理。

    总结

    其他的布局相比与以上布局要么是换了名字,要么是大同小异。

    展开全文
  • 浅谈响应式开发与自适应布局

    千次阅读 2018-05-02 23:41:49
    谈到响应式,大家不自觉的会想到什么? 首先映入眼帘的便是随着网页宽度变化而网页内容呈现出不同内容的效果!那么由来是什么呢? 2009时间段,互联网发生了一件天大的事情! 那就是在北京时间2009年6月9日凌晨2...

    谈到响应式,大家不自觉的会想到什么?

    首先映入眼帘的便是随着网页宽度变化而网页内容呈现出不同内容的效果!那么由来是什么呢?

    • 2009时间段,互联网发生了一件天大的事情!
    • 那就是在北京时间2009年6月9日凌晨2:48分,在美国旧金山MosconeWest会议中心举行的WWDC2009(苹果全球开发者大会)上,苹果公司发布了iPhone第三代产品iPhone 3GS。
    • 而在此之前,手机端的网页浏览是非常简陋的,直到iPhone3GS出现,乔布斯在iPhone的ios4系统中新定义了屏幕手势的缩放、拖动、旋转等,并且使排版更加丰富。从此,iPhone显得不一样。移动端网页显示也同样变得不一样。在此之前,旧的标准已经不适用如此丰富的交互操作,迫于技术革新,w3c紧急推出了html5草案,欧洲计算机协会ECMA同时间段也推出了Es5(EcmaScript)标准以及Es6至以后的标准制定方案!直到2014年下半年左右,HTML5才最终形成标准体系,并基本完善完成!
    • 因此,乔布斯正真的拥有了改变世界、改变了互联网的说法!他的成果,也成功了改变了前端开发者的格局,也推动了前端响应式、移动式开发,以及标准化的发展!
      乔布斯iPhone3GS

    从1991开始 HTML 就是用标记表示一些比普通文本更丰富的文本,文本的超集,有多个版本,没有图片传递,标准混乱.
    1. 1994 HTML2 第一个正式规范.Netspace 和ie推出 w3c成立
    2. 1995 HTML3 提供了很多新特性,例如文字环绕,表格.BrendanEich用了十天开发JavaScript,浏览器大战开始.
    3. 1996 CSS+Javascript 用层叠样式表修改样式
    4. 1997 HTML4 把一些标签标记为废弃,互联网公司的博弈结束,网景公司被收购;ES1出现;
    5. 1998 CSS2 Web技术停滞 ES2 1999 ES3 Mozilla成立
    6. 2000 环境混乱,提出XHTML,更严格的HTML,去除大写的标签,不闭合的标签等 是XML的实现 (2001 ie6 winxp)
    7. 2002 Tableless Web Design 表格布局
    8. 2003 Mozilla基金会成立,推出火狐,第二次浏览器大战
    9. 2005 AJAX 中国到2006年还没有使用ajax的技术
    10. 2009 HTML5 移动端的推动 ES5
    11. 2014 HTML5 Finalized ES6
    12. 2016年1月13日(美国时间12日),微软停止为IE8/9/10这些旧版本的IE浏览器提供技术支持。
    13. 也是在2010年Ethan Marcotte第一次提出了“自适应网页”这个词,他的第一个自适应网页此时诞生,由于多端的自动适配,响应式开发迎来新的局面!

    响应式的基本要求

    1. 大家可以先看一看我制作的一些例子,更改网页宽度大小看一看效果:

    一个简单自适应布局demo,大家可以更改网页宽度或者用手机浏览尝试

    如何实现屏幕自适应?

    首先,是css的引用和区别

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" />
    <link rel="stylesheet" media="screen and (min-device-width:990px)" href="css/media_pc.css " />
    <link rel="stylesheet" media="screen and (min-width:768px) and (max-width:989px)" href="css/media_pad.css">
    <link rel="stylesheet" media="screen and (max-width:768px)" href="css/media_phone.css " />
    • 我们来解读一下
    • 第一个标签name属性值为viewport的meta标签!

      viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。因为不同屏幕比如手机,平板和电脑,至少他们在视觉宽度上是不一样的!啊,那有的人说:“我的手机屏幕和平板一样宽,甚至更宽!”,这种人,不解释,先拖出去打一顿~~~

      首先,先不说视觉宽度,看起来不一样,就是视觉宽度一样的屏幕也有很大不同!我们电脑上有个单位叫像素(px),手机上也有个单位叫”像素“,但这是两个完全不同的概念。有的人有钱,买个5.2寸的手机,像素尺寸1960x1080,有的人更有钱,买个5.2寸的手机3920x2160,这就是差距。手机上的”像素“往往是像素与像素密度或者说子像素的结合,而pc端的像素指的是固定宽高的像素矩阵,叫做”原始像素“。我们将在后面做详细介绍。

    • 然后是后面的link标签!

      看到后面的css引用了吗?

     media="screen and (min-device-width:990px)" href="css/media_pc.css 
        media="screen and (min-width:768px) and (max-width:989px)"  href="css/media_pad.css" 
        media="screen and (max-width:768px)"  href="css/media_phone.css "

    想必这是很明显了吧!通俗来讲,没错,这就是屏幕尺寸的区间限定,在屏幕原始像素宽度属于某一个宽度时,就会引用对应的css样式。这种引用方式只是三种中的一种,另外比较常见的还有以下两种:

    <style>
            @import  url("css/media_phone.css") screen and (max-device-width: 400px);
    </style>

    第二种的缺点就是必须写在style标签的最前面,不然浏览器它不认你!

    @media  screen and (max-device-width: 400px) { 在这里面写手机端css}

    第三种最怕的就是混乱,如果一个css文件要放多套屏幕适配样式的话,花括号就容易出问题!所以我一般都是用的link:css的第一种!但是为什么pc端的css要用device写在限定范围里呢?你可以简单的理解为是以pc端的第一个界面作为css的初始样式,所以以此界定!

    想必大家还看到了一个common.css文件,这是一个用来存放公共样式的css文档,因为很多响应式的布局里,针对各个用户端的css样式毕竟有限,一个可以存放公共样式的文档不但可以大大减少代码量、还能减少代码的复杂度和大小!可谓一举多得!这也是代码优化的必经之路!

    其次是摒弃固执的固定宽度和固定尺寸(这里指原始像素单位)

    • 相对长度
    单位标识符说明
    em与元素字号挂钩
    ex与元素字体的”x高度”挂钩
    rem与根元素的字号挂钩
    pxcss像素(假定显示设备的分辨率为96dpi)
    %另一属性的值百分比

    - 原始像素:
    因为多数计算机显示器的解析度可以通过计算机的操作系统来调节,显示器的像素解析度可能不是一个绝对的衡量标准。现代液晶显示器按设计有一个原始解析度,它代表像素和三元素组之间的完美匹配。(阴极射线管也是用红-绿-蓝荧光三元素组,但是它们和图像像素并不重合,因此和像素无法比较)。对于该显示器,原始解析度能够产生最精细的图像。但是因为用户可以调整解析度,显示器必须能够显示其它解析度。非原始解析度必须通过在液晶屏幕上拟合重新采样来实现,要使用插值算法。这经常会使屏幕看起来破碎或模糊。

    • 子像素:

      很多800w像素16gb内存800w像素16gb内存显示器和图像获取系统出于不同原因无法显示或感知同一点的不同色彩通道。这个问题通常通过多个子像素的办法解决,每个子像素处理一个色彩通道。例如,LCD显示器通常将每个像素水平分解为3个子像素。多数LED显示器将每个像素分解为4个子像素;一个红,二个绿,和一个蓝。多数数码相机传感器也采用子像素,通过有色滤波器实现。(CRT显示器也采用红绿蓝荧光点,但是它们和图像像素并不对齐,因此不能称为子像素)。对于有子像素的系统,有两种不同的处理方式:子像素可以被忽略,将像素作为最小可以存取的图像元素,或者子像素被包含到绘制计算中,这需要更多的分析和处理时间,但是可以在某些情况下提供更出色的图像。 后一种方式被用于提高彩色显示器的外观解析度。

    • PC端 —— 1个设备独立像素 = 1个设备像素 (在100%,未缩放的情况下,如果缩放到200%可以说1个设备独立像素 = 2个设备像素)

    • 移动端 —— 根据设备不同有很大的差异,根据 ppi 不同我们可以得到不同的换算关系,标准屏幕(160ppi)下 1个设备独立像素 = 1个设备像素

    • 像素计算公式:

    image

    就像这样的设备:
    image

    • 以尺寸为4.7英寸、分辨率为1334*750的iphone6为例:
      image

    技巧办法

    这下有清晰的认识了吧!为了要做到屏幕尺寸变化、网页被拉动、网页宽度在变化时最好是使用一下办法:
    - 使用最大宽度

    style="max-with:1000px;"

    当屏幕尺寸大于1000px时,正常显示,当屏幕尺寸小于1000px时自动缩放,这里就要考虑到元素内容的变化了!

    style="width:60%;"

    使用百分比宽高等,让盒子变得灵动起来。

    style="margin-left:calc(50% - 100px);"

    使用百分比搭配的计算公式,calc()是自带的函数。用百分比搭配元素或盒子宽高等代替某些固定的距离,让浏览器自动调节元素位置。

    display:flex|inline-flex;

    应用弹性盒模型,让盒子自己动起来!我的demo演示和三种自适应布局中,中间的tab和后面的弹性盒子实现,每一组盒子都是用到了弹性和模型布局,demo和比较效果图里都明显地展示了网页拉动、不同屏幕情况下内容和盒子的关系!在下面,我再次附上链接:
    - ife的模仿页面编码二:

    一个简单自适应布局demo,大家可以更改网页宽度或者用手机浏览尝试

    弹性盒模型

    • 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”
      image
      容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
    • 弹性盒子和标准盒子拥有一样的宽高边框和边距属性,不同的地方是:

      当盒子设置pdisplay:flex或者inline-flex的时候,它的==子级==元素。

    • 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。而显示方向则通过direction:right-to-leftdirection:left-to-right属性来控制。
    • 弹性盒模型的最大的优点是配合百分比的宽度、max-width的最大宽度等,使元素本身和子级能同时在浏览器宽度变化、显示屏幕宽度变化的情况下,自动的更改宽度以适应改变后的宽度,这也是响应式和移动H5的基础。
    • 弹性盒模型的详细教程参考:
      1. 菜鸟教程
      2. MR_LP的博客
      3. 卢慧建的博客:Flexible boxes更加优雅的Web布局
      4. 菜鸟教程弹性和模型布局详解
    • 上面的几个教程已经讲的非常全面,容纳万千,非常值得大家一看!!!我就不再这里献丑了!
    展开全文
  • 响应式布局自适应布局的区别

    千次阅读 2019-03-31 18:21:46
    响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端,而不是为了每一个终端做一个特定的版本...

    之前我一直以为这是同一个概念,居然在面试上碰到了,有什么区别呢,我就研究了下

    来看一下网上的解释

    1.什么是响应式布局

    响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端,而不是为了每一个终端做一个特定的版本。

    2.什么是自适应式布局:

    自适应布局就是指能使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术,它需要开发多套界面来适应不同的终端。

    。。。。。。。。。。。。。。看了就忘

    分享个文章,里面有很全面的各种布局介绍 https://www.cnblogs.com/yanayana/p/7066948.html

    在我看来,响应式布局更像是自适应布局的优化(自适应布局+流体布局),通过rem和媒体查询设置多个流体布局,可以实现更加合适的视觉效果,相比弹性布局有时候勉强的缩放显示也会更合适,响应式布局相比弹性布局却比较费劲

    我认为,布局也是不存在说哪种布局最好,应该根据场景(实际问题)选择合适的解决方案,或者混合使用。

     

    展开全文
  • 自适应布局 不同大小设备呈现同样的页面效果,只是文字、图片等的大小不一样,但是相对位置一样。 例如:百分比布局、弹性盒布局flex、分栏布局。 百分比布局 所有的宽高都用百分比来实现 Css3分栏布局 css3多...
  • 这两天,看到别人在群里问布局特点,发现自己对这方法...自适应布局特点是分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局,意思就是在这个屏幕下这个元素块在这个地方,但是在那个屏幕下,这个元素
  • 1.什么是响应式布局自适应布局 响应式布局 响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个...
  • 响应式布局自适应布局的区别
  • 什么是响应式布局 响应式布局就是在不同屏幕不同分辨上实现不同的展示方式。响应式布局能使网站在手机和平板电脑上有更好的浏览体验,也就就是说一个网站能后兼容多个终端,而不是为了每一个终端做一个特定的版本。 ...
  • html5响应式图片布局自适应浏览器大小图片布局
  • 响应式布局自适应布局的区别

    千次阅读 2019-05-14 15:51:56
    一直都对响应式布局自适应布局十分混淆,近期也一直在研究,查了许多资料,也看了很多视频,并在项目上应用,才有了详细的了解。现针对个人的理解做下记录,有什么理解不对的地方还请大家指出。 什么是响应式布局 ...
  • 自适应响应式布局 一、自适应 自适应体验 http://m.ctrip.com/html5/ 自适应:为了解决在不同大小的设备上呈现相同的网页 如何实现 自适应主要是指的宽度的自适应 百分比的流式布局 二、 swiper...
  • 什么是响应式布局自适应布局? 在了解响应式与自适应布局有何区别前我们得先知道二者到底是什么,下面我们来分别介绍一下。 一、响应式布局 响应式布局就是能够实现在不同屏幕分辨率大小的客户端上浏览网页的不同...
  • 上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局——移动端自适应布局响应式页面兼容移动端布局。 一、移动端自适应布局 所谓前端适配,就是为了让移动设计...
  • 一、静态布局(Static Layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度...
  • 响应式:不同大小设备可能呈现不一样的页面效果(典型的写法就是通过 media 判断,在不同的设备、分辨率下展示不同的页面效果)。 自适应:不同大小设备呈现同样的页面效果,只是容器、文字、图片等的大小不一样,...
  • 主要介绍了自适应屏幕的CSS响应式布局设计技巧总结,响应式设计是现在移动端页面开发的热门话题,需要的朋友可以参考下
  • 自适应:百分比布局,宽度使用百分比,文字使用em,现在也很多使用rem了,也就是所谓的高清方案;...响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局 —————————————...
  • 静态布局: 特点:没有兼容性问题 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分; 移动设备:另外建立移动网站,单独设计一个布局...
  • 自适应布局 描述:不同屏幕分辨率下,保持原有展示方式。即元素的位置会变化而大小不会变化 优点:页面能够兼容不同分辨率的设备 缺点:屏幕太小会发生内容过于拥挤。所有的设备看起来都是一样的网站,不过是长度...
  • 很多人经常会对响应式布局自适应式布局产生混淆,今天将为大家介绍这两者到底表示的是什么以及它们之间的区别。具有一定的参考作用,希望对大家有所帮助。 一:什么是响应式布局自适应式布局 1.什么是响应式...
  • 一套程序在多种终端设备展示,页面布局有2种:自适应布局响应式布局。这二者有啥区别呢? 自适应布局,就是页面在多种终端设备,不同分辨率下,能够正常展示,不会出现错位,严重变形等,但页面布局不变。 而响应...
  • 先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 ...通俗的说,自适应布局是是为了解决如何才能在不同大小的设备上呈现同样的网页;...响应式布局就是为了解决它的缺点而来的, 可以根据屏幕的...
  • 今天想了解下网站自适应是怎么实现的,接看到这篇文章自己觉得特别好,就保存下来。也供更多的朋友了解学习下。 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,...
  • 今天小编就为大家分享一篇基于layui框架响应式布局的一些使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 八叔引擎之家原创html5响应式自适应茶叶公司企业网站html静态模板

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,089
精华内容 6,035
关键字:

自适应布局响应式布局