移动端的技术选项,流式布局就是宽度给百分比,流式布局为了防止无限制缩小,要加最小宽度

简介: 移动端的技术选项,流式布局就是宽度给百分比,流式布局为了防止无限制缩小,要加最小宽度

流式布局,就是百分比布局,也称为固定像素布局

流式布局最大值设置多大,最小值设置多小

max-width: 980px;min-width:  320px;

京东做法,这个地方占20%,那个地方占20%

这个占50%,这个占25%

12-流式布局_哔哩哔哩_bilibili

京东移动端首页

布局采取流式布局

搭建相关文件及结构

移动端设置第一步:设置视口标签

把index.html放到里面

normalize.css

引入CSS的相关文件,normalize.css

jingdong的320px,定义为

max-width: 640px;

margin: 0 auto;

把我们的body样式

这是是黑色的模块,这样就消失了

8%的宽度,10%的宽度,57%的宽度,25%宽度

app项目

样式设计成这样

ul li:nth-child(1) 定义四个盒子

ul 定义的样式

可以定义背景颜色

导入img图片

这里定义一个img的图片

text-align:center

line-height: 45px;

.app ul li:nth-child(2) img

{

width: 30px;

}

存入一份logo的png

图片居中对齐

HTML写完了0


相关文章
|
4天前
|
容器
Flutter 解决宽度或高度不足而导致的屏幕溢出显示问题
Flutter 解决宽度或高度不足而导致的屏幕溢出显示问题
|
1月前
在使用 Flexbox 布局实现自适应宽度的品字布局时,子元素的排列顺序是否可以调整?
【10月更文挑战第27天】使用Flexbox布局实现自适应宽度的品字布局时,可以通过调整HTML结构中的顺序或使用 `order` 属性来灵活地调整子元素的排列顺序,以满足不同的设计和布局需求。
|
5月前
|
前端开发 容器
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
46 2
|
5月前
|
JavaScript
ELEMENT-PLUES如何设计二级高亮样式,文字如何呈现高亮效果,如果字体出现不对齐的情况,侧边栏icon如何调位置,目录如何折叠,如何延迟动画播放,如何添加阴影,如何添加logo,在行内样式写宽
ELEMENT-PLUES如何设计二级高亮样式,文字如何呈现高亮效果,如果字体出现不对齐的情况,侧边栏icon如何调位置,目录如何折叠,如何延迟动画播放,如何添加阴影,如何添加logo,在行内样式写宽
|
5月前
|
JavaScript
Elementplus淡入淡出效果,头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换,侧边栏如何添加阴影,右边如何设置高度,侧边栏如何设置阴影,如何让icon与文字
Elementplus淡入淡出效果,头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换,侧边栏如何添加阴影,右边如何设置高度,侧边栏如何设置阴影,如何让icon与文字
|
7月前
使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应
使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应
118 2
|
7月前
自定义视口高度,多余的部分使用滚动
自定义视口高度,多余的部分使用滚动
|
UED 容器
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
87 0
|
容器
Echarts跟随数据长度实现高度自适应解决出现滚动条的解决方案
Echarts跟随数据长度实现高度自适应解决出现滚动条的解决方案
448 0
|
编解码 前端开发
前端设置页面字体尺寸跟随屏幕大小而进行变化
前端设置页面字体尺寸跟随屏幕大小而进行变化
674 0
前端设置页面字体尺寸跟随屏幕大小而进行变化