精华内容
下载资源
问答
  • 响应式设计技术概览

    2020-07-25 10:03:30
    什么响应式开发 在移动互联网日益成熟的时候,桌面浏览器上开发的网页已经不能满足移动端设备上的展示和阅读。在响应式流行之前,通常的做法是对移动端单独开发一套特定的版本,但是,如果移动端设备越来越多的...

    什么是响应式开发

    在移动互联网日益成熟的时候,桌面浏览器上开发的网页已经不能满足移动端设备上的展示和阅读。在响应式流行之前,通常的做法是对移动端单独开发一套特定的版本,但是,如果移动端设备越来越多的时候开发成本会比较大,因为需要做所有屏幕的适配。

    响应式开发的目的就是:一个网站能兼容多种终端。实现不同屏幕分辨率的终端上浏览网页时有不同的展示方式,通过响应式设计能使网站在不同终端上有更好的浏览阅读体验。

    响应式开发的技术

    • 媒体查询(@media);
    • bootstrap
    • CSS 单位(remvhvwem 等);
    • CSS 布局(flexgrid 等);
    • 浏览器兼容性;
    • viewport

    响应式设计可以兼容多终端,但这就需要写许多兼容性的代码,可能会出现工作量比较大,加载速度变慢的情况。对于展示性的网站,使用响应式设计还是很不错的,对于业务逻辑比较复杂的页面,响应式设计可能并不好做。对于低版本的浏览器,例如 IE8,如果不支持 CSS3 功能,不太容易实现响应式。

    媒体查询

    媒体查询可以查询与正在使用其内容的设备匹配时,该 CSS 块才能应用于该文档。

    比如当浏览器的视口宽度大于或等于 300px 时 body 将变成红色:

    @media screen and (min-width: 300px){
        body{
            background-color: red;
        }
    }
    

    当浏览器视口的宽度小于或等于 500px 时 body 将变成绿色:

    @media screen and (max-width: 500px){
        body{
            background-color: green;
        }
    }
    

    当浏览器的宽度介于 400px 到 600px 之间时,body 将变成橙色:

    @media screen and (min-width: 400px) and (max-width: 600px) {
        body{
            background-color: orange;
        }
    }
    

    screen 表示主要用于屏幕的查询,如果不指定表示适用于所有设备(all),一般情况下是 screen,除此之外,还有 print,表示适用于在打印预览模式下在屏幕上查看的分页材料和文档。speech 主要用于语音合成器。

    当屏幕的宽度不大于 400px 时,body 会变成紫色:

    @media not screen and (min-width: 400px)  {
        body{
            background-color: purple;
        }
    }
    

    媒体查询是响应式布局的关键,通常情况下,查询视口的宽度,当宽度介于某些值之间时,布局会发生变化。关于媒体查询的更详细使用可以参考 MDN:使用媒体查询

    viewport

    视口(viewport),即“可视窗口”,viewport 通常与浏览器窗口相同,但不包括浏览器的菜单栏、地址栏等。viewport 外的区域,可能需要滚动到其所在的区域才会出现在屏幕上。

    viewport 基本上是当前文档的可见部分。通常 <html> 的大小就是视口的大小,以下代码可以获取 viewport 的大小。

    var clientW = document.documentElement.clientWidth;
    var clientH = document.documnetElement.clientHeight;
    

    clientWidth/Height 表示元素内部的宽度或高度,包括 padding,但不包括 border、margin 和滚动条的宽度或高度。

    document.documentElement.clientWidth/Height 的值比较特殊,它可以专门用于获取 viewport 的宽高,而 document.body.clientWidth/Height 并不具备这个功能,它会获取到整个文档的宽度或高度,包括当前不可见的区域(需要滚动才能展示),但不包括滚动条的宽度与高度。

    与 viewport 类似的 DOM 属性:

    • window.innerWidth/Height 其 innerWidth 会返回浏览器窗口的 viewport 宽度,而且包含垂直或水平滚动条的宽度;
    • window.outerWidth/Height 返回浏览器窗口的外部宽度或高度,包括地址栏、书签栏等。
    • window.screen.width/height 返回设备屏幕的宽度或高度;
    • document.documentElement.offsetWidth/Height 返回该元素的像素高度,包含元素的 border、padding、滚动条宽或高、以及 CSS 设置的宽度(width)值。
    • document.documentElement.scrollWidth/Height 没有垂直滚动条的情况下,scrollHeight 值与元素视图填充所有内容所需要的最小值 clientHeight 相同。包括元素的 padding,但不包括元素的 border 和 margin。scrollHeight 也包括 ::before 和 ::after这样的伪元素。

    浏览器包含两个 viewport:布局视口(layout viewport)和视觉视口(visual viewport)。在 PC 端,innerWidthinnerHeight 所组成的区域通常被认为是布局视口(layout viewport),当浏览器窗口发生变化时,布局视口的大小会发生相应的改变;视觉视口指的是当前浏览器中可见的部分,在 PC 端这两个视口是一致的。但移动端却不一样。

    试想一下,如果 PC 端一个宽度 1000px 的页面在移动端展示会是什么样子?我们知道在移动端页面会缩放,而不是只展示左上角的一小部分,这样做可以让网页信息全部展示出来。

    移动端的 layout viewport 默认值是 980px,visual viewport 是浏览器可见的部分(可以认为是设备的大小),在移动端,布局视口与比视觉视口并不一致,布局视口一般情况下都要比这些设备的屏幕尺寸要大。

    为了让页面能够全部展示,移动端浏览器在渲染时会对页面进行缩放。比如在一个宽 320px 的移动设备显示一个视觉视口宽为 980px 的页面,移动设备浏览器会对这个页面进行缩放直至其视觉视口宽度为 320px(具体取决于浏览器实现)。但缩放后,会导致页面字体变小,页面虽然能展示出来,我们浏览时不得不用手势进行放大,放大之后会出现横向的滚动条,体验是很不友好的。

    在移动端可以重新设置布局视口,通过下面的代码就可以做到。

    <meta name="viewport" content="width=device-width">
    

    width=device-width 表示使用屏幕宽度作为视口宽度。或者使用数值(单位是像素)进行设定:

    <meta name="viewport" content="width=200, height=200">
    

    默认情况下,页面可以使用手势缩放,可以将 user-scalable 设置成 no,禁止缩放。

    <meta name="viewport" content="width=device-width, user-scalable=no">
    

    initial-scale 属性控制页面最初加载时的缩放等级。值是 0.0 到 10.0 之间的正数。下面的代码表示设备大小与视口大小之间的缩放比为 1:1,也即不进行缩放。

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

    最佳配置:

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

    这样设置后,手机端的行为就与 PC 端类似,在 PC 端我们都知道,当浏览器窗口拉大或拉小时页面布局可能会发生变化,适配时使用媒体查询让布局发生变化或者隐藏元素达到响应式的目的,可以使用 flex 布局构建伸缩性良好的页面。

    除此之外,还有两个属性:

    • maximum-scale 一个 0.0 到 10.0 之间的正数,定义缩放的最大值;它必须大于或等于 minimum-scale 的值,不然会导致不确定的行为发生。
    • minimum-scale 一个 0.0 到 10.0 之间的正数,定义缩放的最小值;它必须小于或等于 maximum-scale 的值,不然会导致不确定的行为发生。

    参考资料:在移动浏览器中使用viewport元标签控制布局

    CSS 单位

    CSS 中除了 px 长度单位之外,还有下面几个长度单位:

    • pc 六分之一英寸,1pc = 12pt = 1/6 * 1in = 16px;
    • pt 一磅,72 分之一英寸。1pt = 1/12 * 1pc = 1/72 * 1in ≈ 1.33px;
    • in 一英寸,1in = 2.54cm = 96px;
    • ex 在含有“X”字母的字体中,它是该字体的小写字母的高度。对于很多字体来说,1ex ≈ 0.5em;
    • em 1em 等于父级元素的字体大小,2em 就是父级元素字体大小的二倍;
    • rem 当用在根元素(<html>)的 font-size 上面时 ,它代表了它的初始值;
    • ch 代表元素所用字体 font 中“0”这一字形的宽度;
    • vh 1vh 相当于视口高度的 1%,100vh 就是视口的高度;
    • vw 1vw 相当于视口宽度的 1%,100vw 就是视口的宽度;
    • vmax 视口高度 vw 和宽度 vh 两者中的最小值
    • vmin 视口高度 vw 和宽度 vh 两种中的最大值;
    • % 相对于父级元素的大小来确定;

    参考:CSS <length>

    CSS percentage

    在响应式布局中,尽量使用 CSS 当中的相对单位长度,比如 %emremvhvwvmaxvminrem 很好用,给根元素设置上 font-size 之后,其他元素都用 rem 设置长度,这样当根元素设置的参照值不同时,其他元素的大小都会自动调整。可以用 JavaScript 动态设置 <html> 的字体大小。

    (function () {
        function resize() {
            var deviceWidth = document.documentElement.clientWidth;
            document.documentElement.style.fontSize = (deviceWidth / 6.4) +'px';
        }
        resize();
        window.onresize = resize;
    })()
    

    当窗口大小发生变化时,就动态设置 <html> 的字体大小。然后使用 rem 作为长度单位,在 <meta> 标签中设置上 viewport。

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

    或者直接在 CSS 中使用 calc + vw 设置根元素的字体大小。

    html{
        font-size: calc(100vw / 64);
    }
    

    下表是 CSS 各长度单位的兼容性。可见 rem 最低兼容 IE9。
    兼容性
    动态设置根元素的字体大小可以达到缩放的效果,当屏幕很大时字体或者元素会被放大。这可能会带来一些意想不到的效果,我认为并没有必要这么做。不这样设置,可能在大的或者长的屏幕上可以展示更多的内容,如果不想展示更多的内容,也可以使用 flex 布局或者百分比的方式划分页面。

    bootstrap 栅格系统

    bootstrap 是开发响应式页面的利器,它内部的栅格系统可以让我们创建出响应式的页面。bootstrap 中的 container 容器是响应式布局的基本元素,栅格系统应写在 container 容器中。

    三种 container 方案:

    • .container
    • .container-fluid,全屏模式,适配屏幕的 width: 100% 尺寸;
    • .container-{规格} 指定规格;

    container
    bootstrap 的栅格系统将页面宽度分成 12 份,有五种相应尺寸对应不同的屏幕。内部由行 (.row) 和列 (.col) 组成,开发者必须将呈现的内容放置在列中,而且只有列是行的直接元素。下表是 bootstrap 网格系统在各种屏幕和设备上的细节约定。

    栅格系统
    例如下面的代码:

    <main class="container">
        <header class="bg-info">header</header>
        <article class="row no-gutters">
            <section class="col-xl-3 d-none d-xl-block bg-success">left</section>
            <section class="col-xl-6 col-lg-9 bg-secondary">middle</section>
            <section class="col-xl-3 col-lg-3 d-none d-lg-block bg-danger">right</section>
        </article>
        <footer class="bg-dark">footer</footer>
    </main>
    

    col 容器之间默认会有间隙,一般是左右 -15px 的 margin 或 padding 处理。no-gutters 可以清除间隙。在第一个 section 中有如下代码:

    <section class="d-none d-xl-block">left</section>
    

    这两个组合表示小于 xl 屏幕时隐藏,对应的第三个 section 元素则表示小于 md 屏幕时隐藏。col-xl-3 表示在 xl 屏幕时元素占据 container 容器的三成,bootstrap 将页面或分成 12 份,三个 section 元素在 xl 屏幕下会刚好排成一排,如果 col-xl-* 的值相加超过 12,则会换行。

    上面代码在 xl 屏幕下,section 会排成一排,在 lg 屏幕下,left 会消失,在 lg 屏幕下,right 会消失,最终 middle 独占一行。

    如果要想在小屏幕下 container 容器充满页面,可以使用 container-md 类。

    bootstrap 栅格系统更详细的介绍可以参考:栅格

    展开全文
  • 一:什么响应式布局和自适应式布局 1.什么响应式布局响应式...2.什么是自适应式布局:自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术,它需要开发多套界面来适应不同的...

    在这里插入图片描述

    一:什么是响应式布局和自适应式布局

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

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

    二:响应式布局与自适应布局的区别是什么

    1.自适应布局通过检测视口分辨率,来判断当前访问的设备是:pc端、平板、手机,从而请求服务层,返回不同的页面;响应式布局通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。

    2.自适应布局需要开发多套界面,而响应式布局只需要开发一套界面就可以了。

    3.自适应对页面做的屏幕适配是在一定范围:比如pc端一般要大于1024像素,手机端要小于768像素。而响应式布局是一套页面全部适应。

    4.自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念,它可以自动识别屏幕宽度并做出相应调整的网页设计。

    总之,响应式布局还是要比自适应布局要好一点,但是自适应布局更加贴切实际,因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。所以的说无论哪种设计都有它们各自的特点,我们要根据项目的需求来选择适合的布局方式。

    参考资源:响应式布局和自适应布局

    展开全文
  • 1.什么响应式布局 响应式布局就是实现不同屏幕分辨率...自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术,它需要开发多套界面来适应不同的终端。 二:响应式布局与自适应布...

    1.什么是响应式布局

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

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

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

    在这里插入图片描述
    二:响应式布局与自适应布局的区别是什么

    1.自适应布局通过检测视口分辨率,来判断当前访问的设备是:pc端、平板、手机,从而请求服务层,返回不同的页面;响应式布局通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。

    2.自适应布局需要开发多套界面,而响应式布局只需要开发一套界面就可以了。

    3.自适应对页面做的屏幕适配是在一定范围:比如pc端一般要大于1024像素,手机端要小于768像素。而响应式布局是一套页面全部适应。

    4.自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念,它可以自动识别屏幕宽度并做出相应调整的网页设计。

    展开全文
  • 响应式开发

    2018-03-23 14:47:00
    使用响应式网页的特点:页面的内容比较少,布局也不复杂 需要用到的技术 1. Media Query(媒体查询) 用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸,是否可触摸,屏幕精度...

    顾名思义,就是同一个网站兼容不同的大小的设备。如PC端、移动端(平板、横屏、竖排)的显示风格。

    什么地方用到响应式?

    • 网站的内容并不是很多,如:公司的官网、宣传页面、产品列表、图片列表
    • 使用响应式网页的特点:页面的内容比较少,布局也不复杂

    需要用到的技术

    1. Media Query(媒体查询)

     用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸,是否可触摸,屏幕精度,横屏竖屏等信息。

    2. 使用em或rem做尺寸单位

    用于文字大小的响应和弹性布局。

     

    3. 禁止页面缩放

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

    4. 屏幕尺寸响应

    a)  固定布局:页面居中,两边留白,他能适应大于某个值一定范围的宽度,但是如果太宽就会有很多留白,太窄会出现滚动条,在PC页面上很常见。

    b)  流动布局:屏幕尺寸在一定范围内变化时,不改变模块布局,只改变模块尺寸比例。比固定布局更具响应能力,两边不留白,但是也只能适应有限的宽度变化范围,否则模块会被挤(拉)得不成样子。

    c)  自定义布局:上面几种布局方式都无法跨域大尺寸变化,所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

    d)  栅格布局:这种布局方式使得模块之间非常容易对齐,易于模块位置的改变用于辅助自定义布局。

    自适应和响应式的区别

    自适应:解决如何才能在不同大小的设备上呈现同样的网页(页面的内容和布局不改变)

    响应式:根据不同的设备做出相应的调整,调整布局或是元素(页面的内容和布局是有改动的)

     

    转载于:https://www.cnblogs.com/xiaoan0705/p/8630273.html

    展开全文
  • 响应式开发是前端开发工作比较常见的工作内容,随着移动端的发展,网页设计必须考虑到移动端的设计,同一个网站为了兼容PC端和移动端显示,响应式开发是前端开发人员必备的技术,所以响应式开发的技术必须掌握。...
  • 响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作?...
  • 响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全 面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作...
  • 什么响应式布局: ...自适应布局就是能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术需要开发多套界面来适应不的终端。 响应式布局与自适应布局的区别是什么: 1、自适应布局是通过检...
  • web前端----响应式布局

    2018-03-21 08:04:00
    同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发。 什么响应式? 利用媒体查询,让同一个网站兼容不同的终端(PC端、移动端)呈现不同的页面布局。 用到的技术: CSS3@media查询 用于查询设备是否...
  • 采用全球WEB趋势技术响应式网页设计 电脑/平板/手机/微信都能够自适应并且得到一致的优质体验 功能全面 所有文字图片都可以在后台修改 后台管理简单方便,体验极佳 源码审核严格,精简不冗余,采用HTML5+CSS3 源码...
  • 媒体查询是响应式布局中必不可少的一项技术,媒体查询就是告诉浏览器我们当前是什么设备处于何种状态在浏览网页,媒体查询的类型有: all 适用于所有的设备 print 适用于打印样式 screen 适用于屏幕 speech ...
  •  随着不同分辨率的移动设备出现,网页需要在不同分辨率的设备下给用户提供更加舒适的体验,随之就出现了响应式布局的概念。  响应式布局是Ethan Marcotte提出来的,说白了就是一个网站能兼容不同分辨率的设备,而...
  • 能够具有交互性,能够包含更多活跃的元素,就有必要在网页中嵌入其它的技术。如:Javascript、VBScript、Document Object Model(DOM,文档对象模型)、Layers和 Cascading Style Sheets(CSS,层叠样式表),这里...
  • 测试在响应式网页设计的过程中是很重要的一步。如果你明白我所说的那你需要让你的网站在任何类型的设备上都可以正常显示。  在当今世界,技术进步和工具所带来的用户不仅仅局限在使用网络的笔记本电脑或台式机上。...
  • 什么选择网页字体

    2014-02-12 16:46:00
    响应式设计中主要面对的问题之一是如何缩放图标来适应用户界面,不仅仅是针对于物理尺寸,而且还需要根据屏幕的尺寸和每英寸的像素比例来显示。一般情况之下,都是通过内联块元素<img>标签来添加图标。另一种...
  • 前端是什么?前端都需要学习什么?...随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。 (核心...
  • 学前端需要什么

    2021-05-11 10:25:55
    随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。 (核心技术:HTML、CSS、JavaScript) 核心技术是前端开发中最...
  • 随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。 (核心技术:HTML、CSS、JavaScript) 核心技术是前端开发中最...
  • 随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。 二、前端能干什么?? 前端工程师,别称web前端开发攻城狮,是在...
  • 项目二:写一个响应式网站 js高级、es6.7.8、html5与css3 简单动画练习、场景动画练习 vue->vue+element ui 项目练习 小程序->小程序+WeUI(官方ui框架)项目练习 uniapp->app混合项目练习 ...
  • 针对内容较多的网站,响应式网站加载需要一定时间,但无论采用什么技术,网站庞大打开慢也是可以接受的。 减少代码冗余 H5尚未普及前,要实现网站的动态效果,需要用特定的动画软件制作,网站的一大串代码可想而知。...
  • 前端是什么

    2021-03-11 17:13:04
    随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。 (核心技术:HTML、CSS、JavaScript) 核心技术是前端开发中最...
  • 什么是Ajax

    2016-05-01 16:35:00
    什么是AjaxAJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML ),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不...

空空如也

空空如也

1 2 3 4 5 6
收藏数 106
精华内容 42
关键字:

响应式网页需要什么技术