【响应式Web设计】读书笔记 - 弹性布局与响应式图片(一) - 3_通过弹性布局实现一个响应式导航菜单,即导航菜单随屏幕大小的变化而变化。当鼠标-程序员宅基地

技术标签: 读书笔记  响应式web设计  响应式  响应式Web设计  


【简介】一开始设计网页的时候,网站的宽度都以百分比形式定义。百分比布局使得网页宽度能够随着查看它们的屏幕窗口大小变化,即弹性布局。后来,又回到了固定宽度设计的风潮,因为固定宽度可以有「像素级精度设计」的网页。现如今,而为了能够做好固定宽度在不同屏幕中的自适应,出现了响应式设计

通过媒体查询,可以让我们根据视口大小分别切换不同的样式,但这样的设计,在「断点」处的过渡显得那么不自然。使用弹性布局去解决媒体查询断点间的平滑过渡问题

到了2015年,CSS推出了「弹性盒子」(Flexbox)布局模块,本章主要介绍弹性盒子 Flexbox。

1. 将固定像素大小转换为弹性比例大小

* 通过图形图像软件做出来的图都是以固定像素来衡量大小的,比如一张 jpg 的图片大小为 300 px,如果要在弹性布局中使用这些图,就需要将固定像素大小转换为比例大小。 *

响应式设计之父 Ethan Marcotte 在 2009 年提出一个计算公式:

结果 = 目标 / 上下文 —–表示用元素所在容器的大小除元素的大小。

我们以一张网页布局为例:

这里写图片描述

这个布局宽度为 960px。页头与页脚与屏幕一样宽,为 960px;左侧边栏宽度为 200px,右侧边栏宽度为 100px,所以剩下中间部分宽度为 660px。我们需要把左中右区块由固定像素大小转换为比例大小。

先转换左边栏。左边栏宽度 200px(目标),用 960px(上下文)来除,算出 200px 占 960px 的比例为 20.8333%。

再算中间区域。中间部分宽度 660px(目标),用 960px(上下文)来除,算出 660px 占 960px 的比例为 68.75%。

最后算右边栏。右边栏宽度 100px(目标),用960px(上下文)来除,算出100px 占 960px 的比例为10.4167%。

我们做一个简单的演示,在 body 中做一个布局:

<body>
<div class="Wrap">
    <div class="Header"></div>
    <div class="WrapMiddle">
        <div class="Left"></div>
        <div class="Middle"></div>
        <div class="Right"></div>
    </div>
    <div class="Footer"></div>
</div>
</body>

加入样式表:

<style type="text/css">
html, body {
    margin:0; padding: 0;
}
.Wrap {
    max-width: 1400px;
    margin: 0 auto;
}
.Header {
    width: 100%;
    height: 130px;
    background-color: #038c5a;
}
.WrapMiddle {
    width: 100%;
    font-size: 0;
}
.Left {
    height: 625px;
    width: 20.8333%;
    background-color: #03a66a;
    display: inline-block;
}
.Middle {
    height: 625px;
    width: 68.75%;
    background-color: #bbbf90;
    display: inline-block;
}
.Right {
    height: 625px;
    width: 10.4167%;
    background-color: #03a66a;
    display: inline-block;
}
.Footer {
    height: 200px;
    width: 100%;
    background-color: #025059;
}
</style>

在浏览器中打开页面,然后改变窗口大小,就会发现中间区块会一直与左右边栏成比例缩放。

对于小屏幕而言,核心思想是要把内容显示在一个长条里。因此,将左边栏变成「画外元素」,通常用于保存菜单导航栏之类的内容,只有当用户点击了某个菜单图标时才会滑入屏幕。主内容区位于页头下方,而右边栏又在主内容区下方,最后是页脚区。

通过这样的方式,不仅可以从一种布局平滑切换到另一种布局,而且可以实现两种布局同时伸缩的效果

我们以左边栏为例:

.Left {
    height: 625px;
    background-color: #03A66A;
    display: inline-block;
    position: absolute;
    left: -20px;
    width: 200px;
    font-size: .9rem;
    transition: transform .3s;
}

@media screen and (min-width: 40rem) {
    .Left {
        width: 20.833333%;
        left: 0;
        position: relative;
    }
}

首先,默认情况(即没有媒体查询)下,显示小屏幕布局;随着屏幕变大,宽度变成比例值,定位方式变成相对定位,left 值被设为0。

这里综合运用了两个响应式 Web 设计的核心技术:将固定大小转换为比例大小,以及使用媒体查询相对于视口大小应用 CSS 规则。

附: 欢迎大家关注我的新浪微博 - 一点编程,了解最新动态 。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/JasonAPoint/article/details/71683411

智能推荐

Ajax请求的五个步骤_js ajax请求的五个步骤-程序员宅基地

文章浏览阅读3.6w次,点赞22次,收藏150次。一、原生JS中的Ajax:1、使用ajax发送数据的步骤第一步:创建异步对象var xhr = new XMLHttpRequest();第二步:设置 请求行 open(请求方式,请求url):// get请求如果有参数就需要在url后面拼接参数,// post如果有参数,就在请求体中传递 xhr.open("get","validate.php?username="+name)xhr.open("post","validate.php");第三步:设置请求(GET方式忽略此步骤)头:s_js ajax请求的五个步骤

云数据库POLARDB优势解读系列文章之②——高性价比-程序员宅基地

文章浏览阅读180次。现在做任何事情都要看投入产出比,对应到数据库上其实就是性价比。POLARDB作为一款阿里自研数据库,经常被问的问题是:性能怎么样?能不能支撑我的业务?价格贵不贵?很显然,在早期调研阶段,对稳定性、可靠性很难有量化的指标时,性能的好快就成了一个非常关键的决策因子。POLARDB在一开始设计时就把性能作为一项关键的需求指标列入产品需求说明书,从架构设计到新硬件选型,再到代码实现,从驱动到分布式块存...

ibatis与springmvc出现Check the result mapping for the 'xxx' property的错误_check the result mapping for the 'rownum_' propert-程序员宅基地

文章浏览阅读7.7k次。有与项目需要,将数据库中的一个表增加了一个字段。_check the result mapping for the 'rownum_' property.

对文件指定行进行编辑和保存 linux,linux 文本编辑命令grep sed awk(转)-程序员宅基地

文章浏览阅读641次。[:digit:] 数字字符[:graph:] 非空字符(非空格、控制字符)[:lower:] 小写字符[:cntrl:] 控制字符[:print:] 非空字符(包括空格)[:punct:] 标点符号[:space:] 所有空白字符(新行,空格,制表符)[:upper:] 大写字符[:xdigit:] 十六进制数字(0-9,a-f,A-F)4. Grep命令选项-? 同时显示匹配行上下的?行,如:...

协同过滤算法之基于物品的推荐算法-程序员宅基地

文章浏览阅读829次。目前有关个性化推荐算法主要分为三大类:1.基于协同过滤的推荐;2.基于内容过滤的推荐和3.社会化推荐。本文主要讨论基于协同过滤的推荐,而该算法也可以划分为两类:1.基于用户的协同过滤算法(UserCF)该算法利用用户之间的相似性来推荐用户感兴趣的信息,个人通过合作的机制给予信息相当程度的回应(如评分)并记录下来以达到过滤的目的进而帮助别人筛选信息,回应不一定局限于特别感兴趣的,特别不感兴趣信...

elasticesearch安装head插件_elastic head-程序员宅基地

文章浏览阅读901次。1.下载elasticsearch的head压缩包:下载地址:https://github.com/mobz/elasticsearch-head;点击clone or download按钮,点击download zip进行下载。下载完毕后解压到任意路径上,别放在elasticsearch安装路径上。2.下载node.js:下载地址:https://nodejs.org/en/do..._elastic head

随便推点

linux生成iso文件怎么打开吗,iso文件扩展名,iso文件怎么打开?-程序员宅基地

文章浏览阅读155次。.iso文件类型:Disc Image File扩展名为.iso的文件是一个磁盘文件。文件说明:Common CD or DVD disc image format based on the ISO-9660 standard; contains an exact duplicate of data from the original disc; includes the data saved o..._扩展名iso怎么打开

语音识别,标注数据_语音识别剪切标注-程序员宅基地

文章浏览阅读1.7k次。切割音频文件from pydub import AudioSegmentfrom pydub.silence import split_on_silenceimport ossound = AudioSegment.from_mp3("E:/data/AcsData/zfBX/hw202003301111246_23401.wav")loudness = sound.dBFSoutputPath = "E:/data/AcsData/zfBX/output/"chunks = split_o_语音识别剪切标注

nginx配置反向代理后,网页可以正常访问,但是页面上的js、 css、 视频文件、音乐文件无法加载到_nginx反代视频无法播放-程序员宅基地

文章浏览阅读2.2k次,点赞2次,收藏2次。nginx配置反向代理后,网页可以正常访问,但是页面上的js、 css、 视频文件、音乐文件无法加载到问题为路径问题、将相对路径改为绝对路径即可,一段代码即可解决 location / { root /home/rock/www/website/WE/html; index home.html; } location ~* .(jpg|gif|p..._nginx反代视频无法播放

Windows Server ORA-27101: shared memory realm does not exist.-程序员宅基地

文章浏览阅读411次。风吹起了从前,看着天边似在眼前,万般流连~_ora-27101: shared memory realm does not exist

Tensorflow实现手写数字识别代码详解(新手学习)_tensorflow 数字分类代码-程序员宅基地

文章浏览阅读718次。Tensorflow实现手写数字识别代码详解"""A very simple MNIST classifier.See extensive documentation athttp://tensorflow.org/tutorials/mnist/beginners/index.md"""from __future__ import absolute_importfrom __future__ import divisionfrom __future__ import print_functi_tensorflow 数字分类代码

vue input/el-input监听键盘回车事件[实现回车登录]_el-input监听回车键-程序员宅基地

文章浏览阅读2.4k次。vue input/el-input监听键盘回车事件[实现回车登录]_el-input监听回车键

推荐文章

热门文章

相关标签