less 自适应高度_使用HTML5和Less框架3的自适应Web设计
less 自适应高度
什么是响应式网页设计? 这是一项相对较新的技术,由Ethan Marcotte于2010年中期在他的同名A List Apart文章中首次描述。 简而言之,它涉及提供许多适合各种屏幕宽度的站点布局,然后借助CSS3媒体查询来相应地提供这些布局。
用杰弗里·扎德曼(Jeffrey Zeldman)的一句话来形容:
这就是我们中的一些人在1990年代追求“液体”网页设计的目的,只是它不会吸引人。
一切都很好,但是您如何使用它呢? 毕竟, 凉爽 的孩子 都 全部做,那么为什么不应该吗?
在这个简短的教程中,我将引导您完成一个相当简单的页面设计,并在Joni Korpi的Less Framework 3的帮助下使其响应。 “阿克!” 我听到你大喊; “ CSS框架适合失败者!” 从不畏惧。 用其创建者的话来说,更少只是“或多或少”的框架。 这些丑陋的“ .grid-24”类都不存在,相反,您会发现四种不同的常用分辨率的一些重置样式,一些合理的印刷默认设置以及四种具有相关正文宽度的媒体查询。 这四个布局包含一些有用的注释,说明如何将它们划分为对黄金比率友好的网格,但是是否这样做完全取决于您。
因此,如果您从未测试过媒体查询或响应式设计的水准,那么Less是一个很好的入门方法,可以很快地看到一些结果。 您可能会希望在设计过程中调整媒体查询的确切详细信息,但这将很容易,因为没有“框架”负担让您失望。 减少只是一个有用的起点。
所以,让我们做这个事情!
减少框架3
对于初学者,请转到http://lessframework.com/ 。 该网站本身很好地说明了响应式设计的功能,因此请抓住浏览器的调整大小手柄,并查看页面如何响应各种视口大小。 当您玩完后(不用担心,我可以等待),滚动到页面底部。 有一些自定义选项可用,文本区域包含输出CSS和HTML框架。
就我们的示例而言,您可以保留所有默认选项为选中状态。 将HTML和CSS复制到适当命名的文件中,然后在HTML文件中更新style
标签的源,以指向CSS文件。
如果立即在浏览器中弹出打开HTML文件,您将看到的是页面上的一个大蓝框。 调整浏览器的大小,您将看到它调整其尺寸,就像您希望的那样。 有了该基准之后,就该开始按照我们自己的响应式布局进行工作了。
布局
为了便于说明,我们将列出一个简单的方法。 我进行了快速的知识共享搜索,以查找一些要使用的内容。 我从丽莎的厨房里找到了印度鹰嘴豆和南瓜汤的食谱 。
对于我们的页面,我们希望有一个由配方的成分和说明组成的主块,两个分别带有汤的图片和相关配方列表的侧边栏块以及一个注明内容来源的页脚。
Less框架提供了四个建议的网格,每个宽度对应一个。 这些由60像素的列和24像素的装订线组成。 最窄的布局主要用于纵向移动屏幕宽度为320px的移动设备,其宽度为三列。 接下来,针对高分辨率移动设备,狭窄的浏览器或横向模式下的移动设备,有五列布局,目标宽度为480像素。 默认的八列布局,也将提供给那些不支持媒体查询的浏览器(包括Internet Explorer),以旧的768px屏幕宽度为目标,并且对于平板电脑和上网本也很有用。 最后,有13列的布局用于1280像素以上的屏幕,包括当前大多数台式机和具有良好浏览器的笔记本电脑。
对于我们的食谱,我们将使布局非常简单。 对于两种较窄的布局,我们将采用单列设计,对于两种较宽的布局,将采用两列设计(配方的图像和建议的配方在边栏中)。 最宽的布局是13个60像素的列宽,因此我们将内容和侧边栏之间的8-5拆分。 下一个最大的列是八列,我们将其拆分为5-3。
标记
因为该示例仅是说明性的,并且由于大多数SitePoint读者都使用现代的,复杂的浏览器浏览Web,所以我将使用新HTML5语义元素作为配方的标记。 这是在他们最终统治世界之前熟悉他们的一种很酷的方法。
这是一个骨架:
<body><article><header><h1>Indian Chickpea and Pumpkin Soup</h1></header><aside><img src="data:images/pumpkin_soup2.jpg" /></aside><div><p>Winter squash soups are a healthy ... </p><section><header><h2>Soup:</h2></header><ul><li>¾ cup dried chickpeas</li><li> ... </li></ul></section><section><header><h2>Tempering:</h2></header><ul><li>1 tablespoon olive oil</li><li> ... </li></ul></section><section><p>Rinse the chickpeas ... </p></section></div><aside><header><h1>Related Recipes</h1></header><p>If you liked this recipe you may also enjoy:</p><ul><li><a href="#">Toor Dal Pumpkin Soup</a></li><li> ... </li><ul></aside><footer><p>This recipe is republished from ... >.</p></footer></article>
</body>
配方被标记作为article
,将含有header
中,两个aside
S(每一个用于图像和相关的食谱的列表)中, div
为配方本身,和footer
。 在食谱div
,有许多section
s,每组成分一个,每个section
一个,说明列表。
风格
让我们从默认的八列布局开始。 在样式表中向下滚动到该部分(将在重置样式和版式默认设置的下面)。 我们的第一个任务是设置主要内容的宽度div
和aside
s和浮动它们彼此相对的:
article > div {float: left;width: 348px;margin-right: 24px;margin-bottom: 24px;padding: 24px;background: #FFF;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
} article > aside {float: right;width: 228px;
}
您会注意到我正在使用子选择器(>) 。 当然,这只是出于示例的目的,但是您可能需要依赖于更多传统选择器,具体取决于您需要支持的浏览器,在这种情况下,您需要向标记添加一些class
和id
属性。
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
免费获得这本书
这里的数学运算很简单:主div
是五列宽,在这些列之间包括四个装订线。 因此,(5 x 60)+(4 x 24)=396。每边的填充为24px,则div
的宽度为348px。 对于aside
S时,数学是(3×60)+(2×24)= 228的布局的整个宽度,然后由具有余量的对于所述内容的24个像素div
。
这些样式已经为我们提供了足够好的两列布局,尽管存在一些问题。 首先,对于位于其中的列,图像太大。 这很容易解决(我在某些边界上也有一些阴影):
article > aside img {width: 218px;padding: 4px;background-color: #FFFFFF;border: 1px solid #DDDDDD;-webkit-box-shadow: 2px 2px 2px rgba(0,0,0, 0.2);-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}
我还为标题,段落和列表提供了一些默认样式,但是由于这些样式与布局无关,因此我将在此处跳过它们。 您始终可以查看最终示例的源代码以查看它们。
好的,现在我们有了默认的布局,让我们继续浏览样式表。 正如您将看到的,下一个布局是超宽1280px。 在您自己的自适应设计中,您可能希望从两列设计转换为三列甚至四列设计,并重新组织整个布局以更好地利用所有可用空间。 但是为了说明起见,让我们扩大现有的布局:
@media only screen and (min-width: 1212px) {body {padding: 96px 72px 0;width: 1068px;position: relative;}article > div {width: 600px;margin-bottom: 24px;}article > aside {width: 396px;}article > aside img {width: 386px;}
}
请查看@media
声明的语法:它声明所包含CSS规则应仅适用于屏幕,然后仅适用于最小宽度为1212像素CSS规则。
有了这些规则,您现在应该可以扩大浏览器窗口的宽度,并在传递1212像素时看到设计弹出到更大的尺寸。 好,易于!
最后,让我们处理用于移动设备和较小屏幕的较窄的单列显示器。 这些都要求我们覆盖float
声明,以将所有内容保留在同一列中。 对于最小的布局(320像素),我们还将减小所有字体大小以保持行长可读:
@media only screen and (max-width: 767px) and (min-width: 480px) {body {padding: 60px 42px 0;width: 396px;-webkit-text-size-adjust: 100%;}article > div, article > footer, article > aside {float: none;clear: none;}article > div {width: 348px;}article > aside img {width: 386px;}}@media only screen and (max-width: 479px) {body {padding: 48px 46px 0;width: 228px;-webkit-text-size-adjust: 100%;font-size: 13px;line-height: 18px;}article > div {width: 192px;padding: 18px;margin-bottom: 18px;}article > header > h1 {font-size: 26px;line-height: 36px;}article > div > header > h2 {font-size: 16px;line-height: 24px;}article > div, article > footer, article > aside {float: none;clear: none;}p, section, aside, ul {margin-top: 18px;}
}
就是这样! 现在,您可以采用完全自适应的设计,以适应从智能手机到宽屏办公显示器的屏幕宽度。
观看演示以了解实际操作。
最后说明
响应式布局是使您的现有站点更易于被更多设备访问的好方法。 但是,这并不是说就您的移动策略而言,您可以每天打电话。 正如杰夫·克罗夫特 ( Jeff Croft)和其他人所指出的那样,一个好的移动网站不仅仅限于狭窄的显示范围。 就是说,根据您的资源,您的受众和网站的焦点,完全响应式布局至少是支持移动设备的第一步。
Less框架3根本不是传统意义上的框架,它是一种使用网格布局进行响应式设计进行实验的好方法,并且可以体会此类工作所需CSS语法和结构。 一旦开始创建自己的响应式设计,就可以将其抛弃并重新制作CSS,也可以将其用作启动自己的响应式布局的蓝图。
翻译自: https://www.sitepoint.com/responsive-web-design-with-html5-and-the-less-framework-3/
less 自适应高度
less 自适应高度_使用HTML5和Less框架3的自适应Web设计相关推荐
- html自适应布局_三分钟学会响应式布局和自适应布局
响应式布局和自适应布局详解 响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局. 自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态.而在响应式布局中你却得考虑上百种不同的 ...
- 使用HTML5和Less框架3的自适应Web设计
什么是响应式网页设计? 这是一项相对较新的技术,由Ethan Marcotte于2010年中期在他的同名A List Apart文章中首次描述. 简而言之,它涉及提供许多适合各种屏幕宽度的站点布局,然 ...
- layui的轮播图片自适应大小_解决Layui 表格自适应高度的问题
解决Layui 表格自适应高度的问题 鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css .layu ...
- alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...
- html5毕业论文题目,web设计论文选题推荐 web设计专业论文题目怎么拟
精选了[100道]关于web设计论文选题推荐供您后续的写作参考,在写web设计论文之前,很多大学生总是被web设计专业论文题目怎么拟难倒怎么办?请阅读本文! 一.比较好写的web设计论文题目: 1.响 ...
- ios xib 初始化高度_基于 xib 开发自适应高度 view
基于 xib 开发自适应高度 view 虽然 xib 和 storyboard 不那么受待见,但我依旧喜欢. 自定义 view 说明: title Label 约束 -> top:0 botto ...
- ios wkweb设置图片_iOS 之 WKWebView自适应高度获取网络图片
WKWebView是iOS8中引入的新组建,苹果将 UIWebViewDelegate 与 UIWebView 重构成了14个类和3个协议并引入了不少新的功能和接口,它代替了UIKit 中的 UIWe ...
- [转]让iframe自适应高度-真正解决
原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...
- html中 自适应高度怎么写,html高度自适应
html自适应高度的一个问题. 现在有一个div,里面让一张图片后面跟一个文本框,然后整个div随着浏览 Document *{margin:0 ;padding:0;} .demo{margin-l ...
最新文章
- f是一个python内部变量类型,Python基础变量类型——List浅析
- 苹果首任AI总监Ruslan Salakhutdinov:如何应对深度学习的两大挑战?(附视频)
- 安装软件the error code is 2203解决方法
- opencv 边缘检测
- 计算机应用技术多久退休,Windows 7正式退休 这些解决办法你必须了解
- 安装 Go 第三方包 go-sqlite3
- mybatis-plus的概念
- 强制html元素不随窗口缩小而换行
- String与StringBuffer、StringBuilder之间的转换
- 通过Spring集成进行消息处理
- mysql每一行数据类型_MySQL_MySQL编程中的6个实用技巧,每一行命令都是用分号(;)作为 - phpStudy...
- dubbo 异步回调
- Tarjan算法——强连通分量
- Eclipse安装WindowsBuilder失败解决方法
- 二分插入排序(折半插入排序)--排序算法(六)
- java fly bird小游戏_JavaScript实现Fly Bird小游戏
- 求1到n的所有质数(素数)
- 计算机显存影响什么,老司机告诉你显存是怎样影响电脑速度的
- GEE学习笔记 七十七:GEE学习方法简介
- 谷歌创建用户:手机号码无法用于验证
热门文章
- 嵌入式Linux:安装Ubuntu系统环境
- 京东零售数据仓库演进之路
- IPHONE视频软件测试,工具|6款视频剪辑APP测评
- 【互补松弛定理】12.7.16省队集训
- python第三章_Python学习(第三章)
- 海洋cms解析接口最新
- 穆穆推荐-软件销售行业软件公司销售参考操作手册--之1--公司软件产品的定位分类以及目标客户定位-待续....
- 安装ale_python_interface报错
- Vue3+TS 快速上手 (尚硅谷)
- android三星定位闪退,三星手机闪退问题7种修复方法