html教程自适应,html自适应界面

学习过bootStarp之后，一直最自适应布局很感兴趣，尤其是BootStarp的栅格系统，所以做了一个html小demo，来记录一下自适应的过程

重要的css属性弹性盒子

display:flex;

flex-wrap:wrap;

justify-content:center;

接下来看一段代码

网站商品管理

这是管理网站所有商品功能，在这里可以管理用户上架的所有商品

.container{

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.service-box{

max-width: 33.33%;

padding: 10px;

text-align: center;

cursor: pointer;

}

这是没有加弹性盒子的效果

这是加了弹性盒子的效果 [注意:这里截图的时候屏幕尺寸小于960px]

分析原因

在我看来,这个弹性盒子其实就是让子类可以像是block一样排列起来,并且子类的max-width的百分比决定着他们一排能排几个

重要的属性 @media and screen(max-width:960px)

这个语句的意思是如果屏幕尺寸小于960px那么就执行下面的代码

这个语句由一个前提,那就是这一定是个html:5文件

下面看一下实例

承接上面的css代码

@media screen and (max-width:960px) {

.service-box{

max-width: 45%;

}

因为盒子最大是占据45%,也就是一行只能两行,就能看到上面的图的情况,正常来说,如果用电脑打开那个网页的话,一行会出现三个盒子的

html教程自适应,html自适应界面相关推荐

html教程自适应,Html-自适应
自适应使网页能适应不同终端设备的技术.原理是通过检测视口分辨率来判断是什么终端的,PC,手机还是平板. 做自适应的网页时,需要在代码中加入"祖传代码",即通用代码. 这是在头部h ...
25个自适应菜单教程和脚本
当越来越多的人开始使用mobile设备浏览互联网,站长们也在为他们的网站创建自适应的布局.一个使用应用样式制作的自适应的布局,适合特定屏幕大小.最常见的做法是改变页面布局,从而使多列单栏在屏幕上的空间 ...
【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
antd option宽度自适应_建议收藏：Axure手机自适应教程
hello,我又来啦,今天和大家分享用axure怎么做自适应,也就是说,我们做app端的作品时,怎么在不同的手机尺寸,显示最佳的样式.那么这期的话,我会以一个游戏的案例来展开,所以比较好玩.首先我会教 ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(三十七)地图自适应区域加载...
目前地图编辑器已经能够对地图图片进行切片了,那么接下来我们需要做的是对切好的地图片进行拼装从而取代整张大地图.需要特别说明的是,如果一次性将所有的切片加载进游戏中并显示出来,那么效果与使用一张整的地图 ...
赛灵思 Xilinx Versal 自适应计算加速平台嵌入式设计教程
嵌入式设计教程教程描述 Versal 自适应计算加速平台 (UG1305) 本教程旨在提供有关将赛灵思 Vivado® Design Suite 流程应用于 Versal™ VMK180/VCK1 ...
最新YGbook小说网自适应源码自动采集笔趣阁附详细图文安装教程
介绍: 新安装的直接安装压缩包里边的安装教程进行这个小说采集程序的优点就是,软解析–并不把小说文字和图片采集过来,而是利用转码的形势在你搭建的站点实现,不占用你网站的空间! 自带4条采集规则速度更快( ...
Excel单元格插入图片，并自适应宽高——保姆级教程
Excel单元格插入图片,并自适应宽高--保姆级教程 author:陈镇坤27 日期:2022年3月22日创作不易,转载请注明来源摘要:计算图片高宽像素,将Excel单元格高宽单位转化为以像素为单 ...
分享一套响应式自适应公司网站官网源码，带文字搭建教程
分享一套响应式自适应公司网站官网源码,带文字搭建教程.需要源码学习可私信我. 技术架构 PHP7.2 + nginx + mysql5.7 + JS + CSS + HTML cnetos7以上 + ...

html教程自适应,html自适应界面

html教程自适应,html自适应界面相关推荐

最新文章

热门文章