精华内容
下载资源
问答
  • 响应式布局的4种方法 媒体查询 百分比 vw/vh rem 什么是响应式布局响应式布局是同一页面在不同的屏幕上不同的布局,即只需要一套代码使页面适应不同的屏幕 响应式布局的4种方法 媒体查询 使用@media...

    目录

    什么是响应式布局?

    响应式布局的4种方法

    媒体查询

    百分比

    vw/vh

    rem


    什么是响应式布局?

    响应式布局是同一页面在不同的屏幕上有不同的布局,即只需要一套代码使页面适应不同的屏幕

    响应式布局的4种方法

    媒体查询

    使用@media可以根据不同的屏幕定义不同的样式,具体代码如下图:

             

    百分比

     百分比是相对于包含块的计量单位,通过对属性设置百分比来适应不同的屏幕

               包含块:

                1. 有父元素相对于父元素

                2. 无父元素相对于视口

                3. 或者继承于父元素

    vw/vh

    vw/vh是视口单位,即根据浏览器的窗口大小进行适配

    rem

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

               题外: rem和em的对比

                    1. rem和em都是相对单位

                    2. rem相对于根元素

                    3. em相对于父元素

               情景描述:

               1. 设置HTML的根元素的font-size为20px

               2. 设置红色的正方形宽高为2rem

               3. 设置绿色的正方形宽高为40px

               4. 从图中可以看出两个正方形一样宽高

               5. 所以1rem === 根元素字号 === 20px ,具体代码如下

     

    项目中如何方便的使用的rem呢?

    设想一个场景,如果一个元素的宽需要47px,根元素是20px,如果要适应不同的终端,需要转为rem,除以20px得到相应的rem值,很麻烦,那么就需要找一个可以简单计算的数值,下面就是一个方法呦

    1. 设想屏幕宽度为750px,设计稿宽度也为750px

    2.设置 font-size = 1rem = 屏幕宽度*100/设计稿宽度 = 100px (乘以100的原因,屏幕宽度/设计稿宽度得出的值是1,而浏览器可以接受的最小字号12px,所以乘以100既可以满足浏览器最小字号的要求,也比较好计算)

    3. 屏幕宽度不会只是750px,假设屏幕宽度为width(getBoundingClientRect().width可以获取宽度),在该宽度下的字号为fontSize

    4. 

    5. 通过上面这个方法可以计算出fontSize的值

     

    刚刚接触CSDN,有不足还请指出哦~,大家一起讨论

    展开全文
  • 响应式布局几种思路

    千次阅读 2020-05-04 20:06:13
    响应式布局是什么,为什么?最简单的方法(固定内容区宽度)同比例缩放(rem)rem 简介 是什么,为什么? 电脑显示器很多尺寸,常见的,1366px(宽度)、1980px(宽度),高级点,还有 2k 屏、4k 屏、5k 屏。...

    是什么,为什么?

    电脑显示器有很多种尺寸,常见的有,1366px(宽度)、1980px(宽度),高级点,还有 2k 屏、4k 屏、5k 屏。如果再考虑平板和手机的话,就更多了。
    远古时期,大多数网站是不会考虑这个问题的,一般只会对特别流行的一个尺寸进行设计。这时候,屏幕特别小,或者特别大时,看着就很不舒服。
    为了照顾小屏幕、高分屏(高分辨率屏),就有人提出来“响应式”这种概念。

    笼统来讲,使不同尺寸、分辨率的屏幕,都能呈现出较好的效果,就是响应式布局

    还有一个概念叫“自适应”,从目的上讲,和“响应式”一样。但是码者不是一个那么严谨的人,这里就混作一谈来。

    本文记录码者开发中使用过的几种自适应思路供同仁参考、讨论,以及批评。

    最简单的方案(固定内容区宽度)

    最简单的方法,就是给网页的内容区,设置一个宽度。比如 900px,然后内容区居中、两边留白。因为大部分电脑显示器的宽度都超过 900px,所以,不同的显示器的差异,仅仅在于两边“留白”的大小。
    虽然很简单,但是确实效果不错。码者比较推荐这种方法,但可能是因为简单,很多人不屑于使用这种方法。

    等比例缩放(rem)

    这种方法的思路就是“大屏幕的字大点、小屏幕的字小点”。
    其实这是一个看起来很合理的方法,但是在码者看来是今天所讨论的几个方法中,最 low 的方法。

    因为很多时候,很难判定屏幕是大是小
    大与小,可以是像素的多与少,比如,1920px 宽的屏幕,比 1366px 宽的屏幕“大”;
    但是,1920px 的屏幕有可能是 13 寸的,而 1366px 的屏幕有可能是 15.6 寸的。
    也就是说,物理尺寸大的屏幕,像素尺寸可能更低。也就会出现这种情况:13 寸显示器上的字体比 15.6 寸的还小。实际体验上,有更多你想不到的 low 点。

    但是在某些场景(比如移动端),还是很受用的。所以这里记录同比例缩放的一种实现方案——rem 方案。

    不熟悉 rem 的同仁,可以参考这个简介

    整体思路

    • 给根节点设置一个字体大小
    • 然后,其他尺寸单位全部用 rem
    • 然后,监听屏幕的大小
    • 然后,根据屏幕的大小按比例改变根节点字体的大小

    因为 rem 的特性,其他的尺寸都是根据根节点字体的大小设定的,所以,根节点字体大小一变,其他所有尺寸都会按比例变大、或小。

    大部分浏览器的字体有个最小值:12px。也就是缩小到 12px 后,字体不会继续缩小。

    demo

    点击这里,查看 demo
    打开控制台,或者点这里,查看源码

    最精准的方案(媒体查询,@media)

    整体思路

    @media起到的作用是,你可以给不同尺寸的设备,设置单独、互不影响的 css 属性

    • 比如:屏幕宽度小于 500px 时(手机屏幕),怎样怎样
    • 宽度在 500px ~ 1000px 时(平板屏幕),怎样怎样
    • 宽度在 1000px ~ 1500px 时(电脑小屏幕),怎样怎样
    • 宽度在 1500px ~ 2000px 时(普通电脑屏幕),怎样怎样
    • 宽度在 ……

    demo

    点击这里,查看 demo
    打开控制台,或者点这里,查看源码

    点评

    不同于上一种方案,这种方案,看起来并不是很有用,但实际应用中,它才是响应式领域的霸主。因为,有一个叫“栅格系统”的东西。

    栅格系统(主流方案)

    没错,栅格系统的基础就是媒体查询浮动布局
    但是由于栅格方案,比较复杂,于是决定日后单独记录一篇笔记。

    应该使用哪一种方案?

    遵循国际惯例:具体情况具体分析

    展开全文
  • 响应式最简单方便的就是用现成的框架或者UI库,常见的Bootstrap、ElementUI、LayUI等等,这里拿Bootstrap来举例: 1. 栅格系统 大部分框架都栅格系统,我们可以根据这个直接来规定不同设备上的布局,省去了很...
    • 2021-01-12
      我本来还看了一些网页设计的课程,本来想找里面的一部分内容来着,结果怎么也找不到当时的笔记了,唉怪我自己没收好,生气

    一、使用框架实现响应式

    做响应式最简单方便的就是用现成的框架或者UI库,常见的有Bootstrap、ElementUI、LayUI等等,这里拿Bootstrap来举例:


    1. 栅格系统

    大部分框架都有栅格系统,我们可以根据这个直接来规定不同设备上的布局,省去了很多手写的麻烦。

    超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
    类前缀 .col-xs- .col-sm- .col-md- .col-lg-
    最大列(column)宽 自动 ~62px ~81px ~97px

    Bootstrap把每一行分成12列,使用的时候在类名上加上我们想要的行宽,系统就可以自动分配了。

    <div class="row">
      	<div class="col-xs-12 col-md-4">1</div>
      	<div class="col-xs-12 col-md-4">2</div>
      	<div class="col-xs-12 col-md-4">3</div>
    </div>
    

    这部分的代码在手机上是一列展示的,在电脑上就是三列展示的。



    2. 响应式工具

    除了栅格系统,Bootstrap 自带的响应式工具也可以帮助我们快速的搭建响应式页面。

    可以通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。

    超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面 (≥992px) 大屏幕 桌面 (≥1200px)
    .visible-xs-* 可见 隐藏 隐藏 隐藏
    .visible-sm-* 隐藏 可见 隐藏 隐藏
    .visible-md-* 隐藏 隐藏 可见 隐藏
    .visible-lg-* 隐藏 隐藏 隐藏 可见
    .hidden-xs-* 隐藏 可见 可见 可见
    .hidden-sm-* 可见 隐藏 可见 可见
    .hidden-md-* 可见 可见 隐藏 可见
    .hidden-lg-* 可见 可见 可见 隐藏

    用法类似栅格系统,添加对应的类名就可以了,可以控制在不同页面中的页面布局。



    二、手写CSS实现响应式

    其实我个人用CSS手写的方法比较多,因为在不同设备下,每个内容块的展示方式、布局或者大小可能都是不一样的,栅格系统能够帮我们更改布局,但是更多的比如字体大小这种样式还是要我们重新设置的,手写的话可以一边设置布局,一边就把样式也完成了。


    1. 媒体查询(@media)

    想要手写响应式页面,最最基础的当然是媒体查询。

    有很多媒体类型都已经被废弃不用了,我个人比较常用的是这两个:

    • max-width:最大宽度。
    • min-width:最小宽度。
    body {
        background-color: red;
    }
    @media screen and (max-width: 768px) {
        body {
            background-color: green;
        }
    }
    

    在屏幕宽度小于 768px 时,body 是绿色,不然就是红色。

    要注意,先写通用样式,然后从小往大写。
    因为小屏幕的样式比较少,如果先写大屏幕样式,有了浮动或者定位,要清除起来就比较麻烦。



    2. 设置 Meta 标签

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

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


    3. 宽度设置

    元素的宽度用百分比(%)或者 vw、vh 这个不用我多说了吧~
    不光响应式,普通PC页面肯定也是要这样设置的。

    另外,可以给元素设置最大宽度(wax-width)和最小宽度(min-width)控制缩放量。
    比如这个页面的主体内容我希望他占页面的60%,但是最小也不要低于1000px:

    .main{
    	width: 60%;
    	min-width: 1000px;
    }
    


    4. 计算尺寸

    计算尺寸可能对于响应式来说没那么友好,因为一个元素的宽度我想要跟页面保持一致(100%),但是两边的边距我又想固定(20px)。这个时候就可以利用盒模型来实现啦~

    可以参考我之前写过的文章~
    css盒子模型和样式更改: 点这里跳转





    展开全文
  • 1、全适配:响应式布局+流体布局 2、移动端适配: 流体布局+少量响应式 基于rem的布局 流体布局 流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线无法用百分比,...

    适配布局类型

    PC及移动端页面适配方法

    设备屏幕有多种不同的分辨率,页面适配方案有如下几种:

    1、全适配:响应式布局+流体布局
    2、移动端适配:

    • 流体布局+少量响应式
    • 基于rem的布局

    流体布局

    流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线无法用百分比,可以使用样式中的计算函数 calc() 来设置宽度,或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

    calc()
    可以通过计算的方式给元素加尺寸,比如: width:calc(25% - 4px);

    box-sizing
    1、content-box 默认的盒子尺寸计算方式
    2、border-box 置盒子的尺寸计算方式为从边框开始,盒子的尺寸,边框和内填充算在盒子尺寸内

    响应式布局

    响应式布局就是使用媒体查询的方式,通过查询浏览器宽度,不同的宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕(pc、平板、手机)。

    相应布局的伪代码如下:

    @media (max-width:960px){
        .left_con{width:58%;}
        .right_con{width:38%;}
    }
    @media (max-width:768px){
        .left_con{width:100%;}
        .right_con{width:100%;}
    }
    

    案例:随着屏幕宽度变化而改变布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    	<title>Document</title>
    	<style type="text/css">		
    		body{
    			margin:0
    		}
    		.con div{
    			width:23%;
    			border:2px solid #000;
    			background-color:gold;
    			height:200px;
    			margin:1%;
    			float:left;
    			box-sizing:border-box;
    		}
    		
    		@media (max-width:800px){
    			.con div{
    				width:46%;
    				margin:2%;
    			}
    		}
    
    
    		@media (max-width:400px){
    			
    			.con div{
    				width:94%;
    				margin:3%;
    			}
    		}
    
    	</style>
    </head>
    <body>
    	<div class="con">
    		<div>1</div>
    		<div>2</div>
    		<div>3</div>
    		<div>4</div>
    	</div>
    </body>
    </html>
    
    展开全文
  • 1、全适配:响应式布局+流体布局 2、移动端适配: 流体布局+少量响应式 基于rem的布局 下面先来看看一个布局的问题。 布局问题 首先写四个div 按照百分比来设定宽度,无论如何缩放浏览器,这四个div都会...
  • 响应式布局之百分比布局

    千次阅读 2019-08-20 02:07:43
    响应式布局即是一个页面能适应不同的终端,且能够呈现良好的显示效果。本文主要介绍一些平时做项目会用到的方法,复杂的项目也会同时用到其中的几种,根据项目实际情况进行选择。 百分比布局(流式布局) 百分比是...
  • 前言(文章随笔) 我们都知道,响应式布局就是为了让我们的网站可以同时适配不同分辨率和...那么随着时间的变化,响应式布局方法也是多种多样,下面列举下常用的几种: 一、百分比布局 百分比布局就是利用对属性设
  • 设备屏幕多种不同的分辨率,页面适配方案如下几种: 1、全适配:响应式布局+流体布局 2、移动端适配: 流体布局+少量响应式 基于rem的布局 流体布局 流体布局,就是使用百分比来设置元素的宽度,元素的高度按...
  • 响应式布局相比传统的固定的布局方式可以更好的用户体验,随着移动互联网时代发展,大屏幕设备的广泛使用和发展,越来越多的前端设计师采用了响应式布局方法,这不仅仅是一创新也是一新web开发的新模式。...
  • 移动端布局几种方法: 流式布局(百分比布局): ①先设置body的min-width和max-width ②把每一个最大的那个父元素宽度设置为百分比(即所有元素的宽度设置为百分比,高度定死) ③图片的宽度一定要设置为100%,让它的...
  • 几种html创建响应式图片的方法

    千次阅读 2019-01-23 16:20:43
    1.使用picture标签 先来一段关于mdn的解释: &lt;picture&gt; 元素是一个容器,用来为其内部特定的 &lt;...浏览器会根据当前页面(即图片...该标签使用方法 1.使用media属性 &lt;pictur...
  • 响应式布局: 同一套页面可以兼容不同分辨率的设备。 实现:依赖于栅格系统:将一行平均分为12个格子,可以指定元素占个格子, 步骤: 1.定义容器。相当于之前的table 容器分类: 1.container:两边留白...
  • 响应式Web设计总结

    2015-12-24 08:32:02
    最近几天学习了CSS3响应式设计,那么就来做一下简单的总结:  响应式网页设计(Responsive web design)是一种现代网页设计方法,基于CSS3的...下面来看一下如何实现响应式布局有几种方法   通常我们使用第一
  • 不过呢,还是有几种方法值得推荐,以及一些建议,希望其中一些能够对你有所帮助,你可以汲取几条,并进行结合。要注意多实验,多尝试不同的方法,看看哪种最适合。 利用图像工具设计 利用PS和其它工具创建一个固定...
  • 当我们建立网站的时候,我们一般从定义正文开始。正文的定义显示了你的主栏多宽,其它栏的大小就随它自己内容定义了。直到最近,各种屏幕分辨率或多或少是同质化的。...很多种方法可以定义这种概念。 适应...
  • 不过呢,还是有几种方法值得推荐,以及一些建议,希望其中一些能够对你有所帮助,你可以汲取几条,并进行结合。要注意多实验,多尝试不同的方法,看看哪种最适合。 利用图像工具设计 利用PS和其它工具创建一个固定...
  • 我们从css发展到现在大类可以归纳为以下几种,你了解的实现方法可能就是以下方式中的具体实现:静态布局自适应布局流式布局(又别名 百分比布局 %)响应式布局:媒体查询弹性布局 (rem/em flex布局)1. 静态布局最传统...
  • 适配布局类型

    2019-03-10 02:57:00
    1、全适配:响应式布局+流体布局2、移动端适配: 流体布局+少量响应式 基于rem的布局 流体布局 流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线无法...
  • 其中几种方法在CSS代码上相似之处,也局限或是需要特殊注意的地方,下文具体指出。 首先,我们需要实现的布局效果如下: 上下结构,Footer设置为fixed位于页面底部;导航与主体内容为左右结构。 0、准备工作 ...
  • 移动端布局攻略

    2017-12-27 10:12:04
    除此之外还有响应式布局,固定宽度布局等。 百分比流式布局 这里面最知名的当属bootstrap框架的思路,他所有的组件以及模板ui均是百分比流式布局,单位为px.并且我们看到的大部分对移动端适配的页面也均是采用...
  • 前端之PC及移动端页面适配方法

    千次阅读 2019-05-31 21:59:58
    1、全适配:流体布局+响应式布局 2、移动端适配: 流体布局+少量响应式 基于rem的布局 弹性盒模型 流体布局 流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的...
  • 上一篇博文分析了1px像素问题的...分析1px像素产生原因时,说到meta标签设置的width=device-width,其实这也是产生1px像素问题的前提条件之一,无论你是rem适配方式还是媒体查询的响应式布局,你最终在375px的总宽...
  • 回顾上一篇文章"【实战】用Media Query实现响应式Web布局",谈到页面框架实现响应式布局,那么这里就一个疑问:字体也可以吗?答案:完全可以。大伙都知道,现在设置字体大小常用的就只有几种:px、em、pt、百分比...
  •   移动端大行其道,rem/em、百分比、响应式方案更是层出不穷,看见周围的伙伴们都在对使用rem和百分比情独钟,可我却偏不爱,之所以出现如此多的方法,其目的只有一个屏幕适配。   屏幕适配顾名思义就是一张...
  • 响应式布局有种方法:1. 流式布局:百分比布局(宽,高,定位置) 所谓百分比,尺寸的百分比:基于父级的百分比。 流式布局需要在head里面写上这句话: 使用流式布局是需要注意点:margin,padding 设置这两个...
  • Web.Java是一个高性能,轻量级的非阻塞服务器。 为了能更好的提高性能,Web.Java把HTTP服务区分应用和文件服务两。 Web.Java 整体采用Reactor模式用来接收或响应HTTP请求(原理同Nginx)。 ...
  • 1、全适配:响应式布局+流体布局 2、移动端适配: 流体布局+少量响应式 基于rem的布局 基于rem的布局 首先了解em单位,em单位是参照元素自身的文字大小来设置尺寸,rem指的是参照根节点的文字大小,根节点指的是...
  • Bootstrap栅格系统

    2019-09-24 07:12:08
    最近学习了几种布局方法。 这些布局方法有Bootstrap栅格系统、圣杯布局、负边距布局。 今天先讲讲Bootstrap栅格系统。 Bootstrap栅格系统: Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕...

空空如也

空空如也

1 2 3 4 5
收藏数 95
精华内容 38
关键字:

响应式布局有几种方法