保证布局内每一级必须设置相对于父级百分比宽度,但设计稿一般都是按照固定宽度设计,内部图片都是固定大小,拉伸或者缩放时都会导致变形,虽然都够实现布局宽度上的自适应,但分辨率过高或者过低时都无法达到一个良好的显示效果,需要设置min-width和max-width来保证页面最基本的视觉效果
<!DOCTYPE html>
<html>
<head>
<title>Flow Layout Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 30%;
margin-bottom: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
通过CSS3的媒体查询,根据不同的屏幕尺寸区间设置不同的样式效果,和不同尺寸的图片,来保证页面图片显示不失真,布局元素错乱。当分辨率过低 元素数量众多时 可控制子元素的显示和隐藏,以及其他效果组件的展示,比方横向tab展示 变更为下拉选择 vscode
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.my-image {
width: 30%;
margin-bottom: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
background-image: url('image-large.jpg');
}
/* 当分辨率在320px到768px之间时,将item元素的背景设置为image-small.jpg */
@media screen and (min-width: 320px) and (max-width: 768px) {
.item {
background-image: url('image-small.jpg');
font-size:12px
}
}
/* 当分辨率大于768px时,将item元素的背景设置为image-large.jpg */
@media screen and (min-width: 769px) {
.item {
background-image: url('image-big.jpg');
font-size:14px
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">hc 1</div>
<div class="item">hc 2</div>
<div class="item">hc 3</div>
</div>
</body>
</html>
栅格布局是一种网格化的页面布局方式,它由行和列组成,可以使开发者更容易地创建多种不同大小和位置的元素,并通过调整这些元素的行和列来实现响应式设计。栅格布局适用于各种设备尺寸,使得页面在各种屏幕上都能够正常显示。 在栅格布局中,开发者可以定义一个网格容器,然后在容器中定义行和列,用来划分网格。每个网格可以放置一个或多个元素。通过调整每个元素所占据的行和列,以及它们之间的距离,可以实现各种页面布局效果。
<template>
<div>
<iv-row :gutter="16">
<iv-col :span="8">
<!-- 左边 -->
</iv-col>
<iv-col :span="8" :offset="4">
<!-- 中间内容 -->
</iv-col>
<iv-col :span="4">
<!-- 右侧内容 -->
</iv-col>
</iv-row>
</div>
</template>
Flex布局也可以用来实现栅格布局,它提供了一些灵活的属性来定义网格元素的排列和位置。相比于传统的栅格布局,Flex布局更加灵活,并且在响应式设计上具有更好的适应性。 以下是Flex布局常用的一些属性
display:定义flex容器,默认值为flex。 flex-direction:定义主轴的方向,包括row、row-reverse、column、column-reverse四个值。 justify-content:定义主轴上网格元素的对齐方式,包括flex-start、flex-end、center、space-between、space-around五个值。 align-items:定义交叉轴上网格元素的对齐方式,包括flex-start、flex-end、center、baseline、stretch五个值。 flex-wrap:定义网格元素是否换行,默认情况下都不换行,可选nowrap、wrap、wrap-reverse三个值。 order:定义网格元素的显示顺序,默认为0,数值越小越靠前。 flex-grow:定义网格元素在剩余空间中所占的比例。 flex-shrink:定义弹性子元素的缩小比例。 flex-basis:定义弹性子元素的基准大小。 flex:是 flex-grow、flex-shrink 和 flex-basis 的简写形式。 align-self:定义单个网格元素在交叉轴上的对齐方式。
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
/* flex-grow:1 子元素分配剩余空间* 0 有空间也不放大 2 大一倍/
.item {
flex-grow: 1;
height: 100px;
background-color: gray;
margin: 10px;
text-align: center;
font-size: 30px;
line-height: 100px;
}
.item-1 {
flex-basis: 200px;
}
/* item-2 如何和他俩在一个主轴 始终会比他们大200px*/
.item-2 {
flex-basis: 400px;
}
.item-3 {
flex-basis: 200px;
}
</style>
display:定义为网格容器。 grid-template-areas:指定网格模板中的区域名称。 -grid-template-columns:指定网格列的大小。 -grid-template-rows:指定网格行的大小。 grid-template:是 grid-template-areas、grid-template-columns 和 grid-template-rows 的简写形式。 grid-auto-columns:指定未显式指定宽度的列的大小。 grid-auto-rows:指定未显式指定高度的行的大小。 grid-auto-flow:指定如何安排未被显式布局的项。 grid-column-gap:设置网格行之间的间距。 grid-row-gap:设置网格列之间的间距。 grid-gap:是 grid-row-gap 和 grid-column-gap 的简写形式。
grid-area:是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写形式。 grid-column-start:指定一个项目的列开始位置。 grid-column-end:指定一个项目的列结束位置。 grid-row-start:指定一个项目的行开始位置。 grid-row-end:指定一个项目的行结束位置。 grid-column:是 grid-column-start 和 grid-column-end 的简写形式。 grid-row:是 grid-row-start 和 grid-row-end 的简写形式。 grid-area:指定项目应该放置在哪个网格区域中。 justify-self:定义单个项目在其列中的对齐方式。 align-self:定义单个项目在其行中的对齐方式。 place-self:是 align-self 和 justify-self 的简写形式。
可以将一个元素及其子元素的所有尺寸都放大或缩小。默认的缩放值是1,表示不进行任何缩放。如果将缩放值设置为2,则元素及其子元素的所有尺寸都会变为原来的两倍;如果将缩放值设置为0.5,则元素及其子元素的所有尺寸都会变为原来的一半。 zoom在兼容性上存在一些问题,目前火狐浏览器是不支持,其他浏览器支持,存在一定的风险性
实现方式不同:transform: scale() 是通过 CSS3 的 transform 属性进行缩放,而 zoom 是通过浏览器提供的缩放功能实现的。 兼容性不同:transform: scale() 属性在大部分现代浏览器中得到支持,而 zoom 属性只在 IE 浏览器和 Edge 浏览器中得到支持。 对布局影响不同:使用 transform: scale() 属性进行缩放时,元素的尺寸、位置等属性会改变,但对周围元素的布局不会产生影响。而使用 zoom 属性进行缩放时,元素及其周围的元素都会被缩放,因此可能会影响整个页面的布局。
rem是CSS3新增的一个相对单位,它是相对于根元素(html元素)的字体大小来计算的。rem的全称是"root em",意为"根em"。
使用rem作为长度单位,可以实现页面的自适应布局。当用户调整浏览器窗口大小或者在移动设备上旋转屏幕时,页面中所有元素的大小都会根据当前根字体大小的比例进行缩放,从而适应不同的屏幕尺寸和设备类型。
使用rem作为单位有以下优点:
相对于像素单位(px)更具有可扩展性,可以适应各种不同分辨率的设备。 相对于百分比单位(%)更加直观,不需要手动计算每个元素的百分比值。 支持低版本浏览器,如果无法识别rem单位,也可以提供降级方案。
们将根元素字体大小设置为页面宽度的百分之一,即font-size: calc(100vw / 100)。然后,在样式表中使用rem作为单位对元素进行设置,例如.box { width: 20rem; height: 10rem; font-size: 1.6rem; }。这样,当浏览器窗口大小改变时,根元素字体大小也会随之改变,从而实现页面的自适应布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rem布局示例</title>
<style>
/* 设置根元素字体大小 */
html {
font-size: calc(100vw / 100);
}
/* 使用rem设置元素属性 */
.box {
width: 20rem;
height: 10rem;
font-size: 1.6rem;
border:1rem solid #00000
}
</style>
</head>
<body>
<div class="box">这是一个自适应布局的示例</div>
</body>
</html>
npm install postcss-pxtorem postcss-loader --save-dev
module.exports={
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基础字体大小
propList: ['*'], // 要转换的属性列表,这里表示所有属性都要进行转换
selectorBlackList: [], // 不需要转换的选择器,可以是字符串、正则表达式或者数组
unitPrecision: 5 // 转换后的rem值保留小数位数
}
}
}
{
test: /.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: './path/to/postcss-config.js'
}
}
}
]
}
.container {
width: 320px;
font-size: 14px;
}
这样,在编译时,postcss-pxtorem会自动将像素单位转换为rem单位。对于上述样式代码,转换后的结果如下:
.container {
width: 20rem; /* 320 / 16=20 */
font-size: 0.875rem; /* 14 / 16=0.875 */
}
通过使用postcss-pxtorem插件,可以简化自适应布局的实现,并且不需要手动计算每个元素的rem值。
作者:二哈怕不怕
链接:https://juejin.cn/post/7301985758467244043
文链接: https://getflywheel.com/layout/css-grid-layouts-how-to/
栅格布局的思想起源源自于印刷设计。栅格是用来将设计元素精确定位到页面上的的测量工具。这种想法经常被用在网页上来进行内容组织和统一,提升用户的视觉体验。
网页设计刚起步的时候,设计和布局都是是相当简单的, 通常包含头部,侧边栏,内容区域和页脚。现在,随着网络的演变,网页的布局也变得更加复杂,做网页设计师的人也随之增加。我们经常需要大量的内容区域,响应式设计,多页面模板设计,以及许多其他的。浮动和定位在实现这些设计的时候,是必不可少的。但浮动听起来简单,实际操作起来却很棘手。
但接下来,我们会介绍一种简单的设计布局。随着CSS栅格布局的不断发展,成为设计师也会变得越来越容易。
CSS栅格兼容性
作为一名设计师,需要了解网页设计的未来。CSS栅格布局将改变现有规则,为设计师处理头痛了许多年的定位。虽然目前还不是主流的做法,但是这是一件值得期待的事情。
在我们真的深入了解栅格布局之前,要强调的一件事,浏览器并不普遍支持, 希望这种工作方式在未来可以得到越来越多的浏览器支持。不过, 好消息是, 您可以轻松地尝试使用CSS栅格布局,以及了解它是如何工作的。
在使用示例之前,请你确保你的浏览器支持。目前只有Internet Explorer 10+和 edge 支持。其他的浏览器通过一些手段也可以浏览,但因为它不是官网支持,所以你只能是不断的去尝试。(If you view the Can I Use documentation on CSS Grid Layouts, at the time of this post, you will notice little flag indicators. These show that you will need to be in “flag mode.”)如果你边使用Can I Use来查看栅格布局的兼容性,边看这篇文章,那么你就可以注意到每个细节的不同。
当您在测试栅格布局的时候,你需要做几件事情帮助你正确地看到布局。使用Chrome查看,你需要启用“实验性网络平台功能”。如何启用呢?在Chrome 浏览器中打开chrome://flags 这个地址。当url 链接chrome://flags加载完毕之后,向下滚动页面,找到该选项,设置为“启用实验性网络平台功能”。
火狐也允许您查看栅格布局,通过“layout.css.grid.enabled”参数设置。开启方法类似于Chrome浏览器的说明。在Firefox浏览器中URL输入 about:config。向下滚动页面,设置为启用 “layout.css.grid.enabled” 。
如果你想马上开始使用CSS栅格布局,对于不支持它的浏览器还有一个变通方案。如果你熟悉polyfills的想法,那已经有解决方案了。如果你不熟悉polyfills,可以利用浏览器后退,利用JavaScript的力量,允许现代的浏览器功能(例如CSS栅格布局)在旧的浏览器运行。
Polyfills超出本教程范围,但随着越来越多的设计师开始使用这项技术,更多的polyfill 技术将会涌现。如果你准备尝试,这里是一个推荐的 polyfill option。请务必阅读作者的文档,了解有关如何使用它的详细信息。
那么,在承诺100%使用CSS栅格布局之前,要确保使用的生产代码,做一些深入的测试。
CSS栅格布局基本知识
通过利用CSS,栅格布局将有助于您的网页内容的呈现。这里有一篇相对较新的定义的属性的CSS栅格布局规范 。这是学习栅格设计的一个很好的资源。CSS栅格设计有助于简化的东西,使创建布局更加容易。想象一下,栅格作为一种结构,尺寸可以被定义。
栅格的组成
行(lines)
在上图中,有五条垂直线和三条水平线。线从1开始编号。示例中,垂直线从左至右,这取决于书写方向。如果书写方向是由右至左,顺序就颠倒过来。可以给线起名(可选),方便在CSS中引用。
轨道(tracks)
轨道是两条平行线之间的空间。在图中,有四个垂直轨道和两个水平的轨道。这是线和轨道的共同结果。 线是记录内容的起点和终点。轨道是内容真实存在的位置。
单元格(cells)
单元格是水平和垂直轨道的相交处。图中有八个单元格。
面(areas)
单元格指定面的时候发挥作用。面是矩形形状,可以跨越多个单元格。像线一样,面也可以任意命名。如在图中的几个标签:“A”,“B”,和“C”。
创建栅格布局
用老方格纸,布局之前,先勾勒轮廓。
HTML栅格
<div class="container">
<div class="grid header">Header</div>
<div class="grid sidebar">Sidebar</div>
<div class="grid content">Main Content</div>
<div class="grid extra">Extra Content</div>
<div class="grid footer">Footer</div>
</div>
容器Container是非常重要的。容器内是用于显示网站的不同的内容块。内容块的顺序并不重要。接下来,我们将使用CSS将它们按照我们的布局显示。
CSS样式
HTML完成后,我们来写CSS。给container设置display:grid 或者 display:inline-grid. 如果你希望设置块级元素,那使用 display:grid ; 如果你希望设置成内联元素, 那使用display:inline-grid。想了解更多细节,可以查看文档
.container {
display: grid;
grid-template-columns: 0.25fr 15px 0.75fr;
grid-template-rows: auto 25px auto 25px auto 25px auto;
}
.grid {
background-color: #444;
color: #fff;
padding: 25px;
font-size: 3rem;
}
grid-template-columns和grid-template-rows属性用于指定行和列的宽度。这个布局定义了五列。15px是两个元素之间的间距。第三列占用0.25份的剩余空间。同样地,第五列占用0.75份的剩余空间。(疑问: 图中根本没有第五列啊,感觉作者写错了)
There are responsive customizations that can be made, but this is a great step to take prior to that. It may seem like using pixel measurements would be limiting, however, using auto for the first row in grid-template-rows allows the row to expand as necessary based on the content inside it. The 25px row acts as a gutter.
对于响应式布局这个规范是很便利的,如果使用像素,则会被限定死。第一行使用grid-template-rows来表示,随着内容需要的变化而变化。设置padding 成 25 像素,与头部留有间隙。
元素看起来很紧凑,但再加一些规范,元素将初具规模。
这个例子先放置的头部,但元素位置可以按您喜欢的任意顺序摆放。如果你想从页脚开始,也可以。
我们先从头部开始,从列1开始到列4结束,从行1开始到行2结束,CSS看起来就像这样:
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
您可能会注意到侧边栏被压住了,我们无法看到它。我们需要重新排列一下。在这种布局,通过行的位置进行排列。以行作为标准。头部占一行和二行的位置,侧边栏,从三行开始, 到六行结束。 头部到第二行结束,侧边栏从第三行开始正好可以显示到头部下面。要查看示例,请参见该项目Codepen。
我们使用grid-column-start指定一个元素起始垂直线。在本例中,它将被设置为3。grid-column-end表示一个元素的结束垂直线。在这种情况下,这个属性就等于四。其他行值也用同样的方式设置。侧边栏的位置是存在的,它只是覆盖的内容区。
.sidebar {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 6;
background: #a0c263;
}
主要内容在第三列开始,第四列结束。侧边栏和内容区域的顶部对齐,所以他们都从grid-row-start第三行开始。你可能想让内容栏比侧边栏高很多。通过设置容器上的高度,假如400像素,这个时候,它就会比其它元素高很多。
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #f5c531;
height: 400px;
}
最后两个内容区域是额外内容区域和页脚。
.extra {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #898989;
}
.footer {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 7;
grid-row-end: 8;
background: #FFA500;
}
响应式优势
布局已经创建好了,似乎很像一个“桌面”。那么平板电脑和移动设备怎么显示?CSS栅格布局加上媒体查询可以适应不同的屏幕尺寸。真正酷的是,你可以在这些不同的媒体查询范围里,改变内容区域。作为一个设计师,这意味着你选择什么是最适合你的布局在不同的断点。例如,如果你想要将“次要内容”被放在“内容”区域之上,可以指定正确的行和列。
/* For mobile phones: */
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.extra {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.content {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #f5c531;
height: 400px;
}
通过设置成列1开始,列4结束,来设置成内容全宽。将“次要内容”显示在了“内容”之上。
CSS栅格布局是一种新型的布局方式。正如你所看到的,这种方法很容易创建一个简单的页面布局去运行。上面这个简单的例子也可以为如何创建更复杂的布局打下良好的基础。假如这个技术获得普及,在设计各种设备和尺寸,布局大小自定义的时候,这个技术会是一个优势。
问切 wenqie(.cn),是切图网旗下关注用户体验,专注H5移动适配的品牌网站。
用HTML怎么制作网页呢?静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计 ? ,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的。
一、网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
二、网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。
三、网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。
四、网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;
五、网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。 其中: (1) html文件包含:其中index.html是首页、其他html为二级页面; (2) css文件包含:css全部页面样式,文字滚动, 图片放大等; (3) js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。
*请认真填写需求信息,我们会在24小时内与您取得联系。