rem适配布局制作苏宁移动端首页

爆款手机

爆款手机

爆款手机

4.设置公共common.less文件

==================================================================================

1.新建common.less设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要

2.我们关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px划分的份数

3.我们定为15等份（这个是自定义的）

4.因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为50px，注意这句话写到最上面

commom.less:

// 设置常见的屏幕尺寸 修改里面的html文字大小

a {

text-decoration: none;

}

// 一定要写到最上面

html {

font-size: 50px;

}

// 我们此次定义的划分的份数 为 15

@no: 15;

// 320

@media screen and (min-width: 320px) {

html {

font-size: 320px / @no;

}

}

// 360

@media screen and (min-width: 360px) {

html {

font-size: 360px / @no;

}

}

// 375 iphone 678

@media screen and (min-width: 375px) {

html {

font-size: 375px / @no;

}

}

// 384

@media screen and (min-width: 384px) {

html {

font-size: 384px / @no;

}

}

// 400

@media screen and (min-width: 400px) {

html {

font-size: 400px / @no;

}

}

// 414

@media screen and (min-width: 414px) {

html {

font-size: 414px / @no;

}

}

// 424

@media screen and (min-width: 424px) {

html {

font-size: 424px / @no;

}

}

// 480

@media screen and (min-width: 480px) {

html {

font-size: 480px / @no;

}

}

// 540

@media screen and (min-width: 540px) {

html {

font-size: 540px / @no;

}

}

// 720

@media screen and (min-width: 720px) {

html {

font-size: 720px / @no;

}

}

// 750

@media screen and (min-width: 750px) {

html {

font-size: 750px / @no;

}

}

通过easyLESS插件可直接转化成css文件

5.新建index.less文件

===============================================================================

1.新建index.less这里面写首页的样式

2.将刚才设置好的common.less 引入到index.less里面语法如下∶

3.生成index.css 引入到index.html里面

index.less:

// 首页的样式less文件

@import “common”;

// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面

// link 是把一个 样式文件引入到 html页面里面

body {

min-width: 320px;

width: 15rem;

margin: 0 auto;

line-height: 1.5;

font-family: Arial,Helvetica;

background: #F2F2F2;

}

// 页面元素rem计算公式： 页面元素的px / html 字体大小 50

// search-content

@baseFont: 50;

.search-content {

display: flex;

position: fixed;

top: 0;

left: 50%;

transform: translateX(-50%);

width: 15rem;

height: 88rem / @baseFont;

background-color:#FFC001;

.classify {

width: 44rem / @baseFont;

height: 70rem / @baseFont;

margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;

background: url(…/images/classify.png) no-repeat;

// 背景缩放

background-size: 44rem / @baseFont 70rem / @baseFont;

}

.search {

flex: 1;

input {

outline: none;

width: 100%;

border: 0;

height: 66rem / @baseFont;

border-radius: 33rem / @baseFont;

background-color:#FFF2CC;

margin-top: 12rem / @baseFont;

font-size: 25rem / @baseFont;

padding-left: 55rem / @baseFont;

color: #757575;

}

}

.login {

width: 75rem / @baseFont;

height: 70rem / @baseFont;

line-height: 70rem / @baseFont;

margin: 10rem / @baseFont;

font-size: 25rem / @baseFont;

text-align: center;

color: #fff;

}

}

// banner

.banner {

width: 750rem / @baseFont;

height: 368rem / @baseFont;

img {

width: 100%;

height: 100%;

}

}

// ad

.ad {

display: flex;

a {

flex: 1;

img {

width: 100%;

}

}

}

// nav

nav {

width: 750rem / @baseFont;

a {

float: left;

width: 150rem / @baseFont;

height: 140rem / @baseFont;

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体免费获取

，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-VgikSpc3-1713555206866)]

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体免费获取

[外链图片转存中…(img-nT7N9X92-1713555206866)]

[外链图片转存中…(img-rN9tArkj-1713555206867)]

[外链图片转存中…(img-P3vTUAF0-1713555206867)]

[外链图片转存中…(img-m1xPRKNU-1713555206867)]