HTML5&CSS3_移动端day06


vh和vw的使用

299

vh/vw和rem一样也是一种尺寸单位,而且现在大厂基本上在使用,小企业还没有普及。

rem即根字体自己media设置,或引入flexible.js后默认是视口的十分之一,vh/vw不用引入设置任何东西,默认为视口的百分之一

计算方法

300

同一个元素,设置大小,vw和vh能混用吗?

不可以,因为虽然大部分手机的宽高比是相同的,但是如果一个手机与其他设备宽高比不同,如全面屏手机,则在这个手里里的控件显示大小就和设备的不一样。

如一个设计稿设备是375x667,一个是200x1000,一个控件是37.5x66.7,那么我们计算出来就是10vh和10vw,但是这样到另一个设备就是20x100,明显控件变形了。

bili移动端静态页面(使用vh/vw)

如何拿素材

f12控制台解决一切,如小图标在iconfont找不到一样的,选中查看类名,再进入s控制台tyle中此图标生效的css,复制即可。

301

open in new tab,复制压缩好的css,在我们需要这个图标时,引入此css,再赋予同样的类名即可。

其中还有一些iconfont.woff/ttf/eot都是字体,可以不用下载保存。

302

尺寸和margin,padding在computed看盒子模型即可。

注意

303

1-less文件中。import没有冒号,但是声明变量有冒号

2-justify-content属性值,如space-between/around等,需要父级有宽度,否则无法计算,自然无法给出间距。

3-有时上下的一些间距,不需要用padding,marging,用align-items:center,或者设置一下行高就行了。

4-最外的div,也就是页面的总大小,不需要设置高度,或者设置min-height(最少多少,没达到就留白)内容设置高度往下堆积即可,超出屏幕大小,用户可以滑动下去观看,宽度设置为100%和100vw都可以,也可以不设置,根据情况而定(如果需要用到子内容定位就得设置宽度)

5-flex默认不换行,可以设置换行,但是有时候,就是要不换行,比如一行超出范围显示省略号,就需要给不换行,但是得给内容的父盒子设置一个宽度,就不会挤压,而是显示省略号,否则就会超出盒子范围,不显示省略号。

6-vh和vw混用,对响应适配也有影响,因为当用户把宽拖小,高又不变,自然盒子变形。

布局

我们把这个页面,从上到下,从内到外,先分为三大部分,头部固定,内容,和按钮固定

头部固定

tips

1-行内块display:inline-block标签换行有间距

参考:https://blog.csdn.net/haodian666/article/details/121021889

步骤

1-头部我们再细分为上部分和下部分,如下图

304

2-上部分再分为左右,左边的bili图标用a标签嵌套i实现,右边的放大镜也使用iconfont,登入与下载app引入图片即可,最后设置大小和样式(注意这里a标签无法直接设置大小,可以使用dispaly转行内块,但是这样标签间会有空隙,所以可以让right变为flex布局,flex后没有行内与块的区分,a也能设置大小)

3-因为权重问题,iconfont调节大小,需要用.iconfont的类选择器,不能给父级样式来继承。

4-菜单栏使用ul>li>a的结构即可

内容区域

1-注意这个是tab栏,菜单个数和内容个数一定要相同,至于怎么换内容,在webapi会学到

2-我们直接加内容,会发现内容直接在页面最上面,为什么呢,因为头部是fixed固定定位,脱标了,然而我们现在写的是标准流,所以需要给主页加一个padding,把我们要写的内容区域挤下来。

3-内容即图片文字调节样式位置即可,注意这里用到了省略号ellipsis的类,还有多个图片,需要用到flex-wrap:no-wrap去除flex的不换行,否则会全部挤压到一行。

fotter区域

加一个图标,固定定位即可。

完成项目后发现问题

滑动内容区域,header固定定位消失了?是fixed不生效吗?

306

​ 其实固定定位还在,但是内容滑上去和header混到了一起,解决方法是给header加一个z-index:1,再加一个白色背景即可,让它时刻在最上层。


文章作者: 瑾年
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 瑾年 !
评论
  目录