苏宁css代码生成器,【前端】06 - rem + less + 媒体查询

1. 创建目录结构

目录结构

2. 引入 normalize.css 初始化样式。

3. 编写公共的 common.less 文件。

编写common.less 设置常见的屏幕尺寸：

1. 设置常见的屏幕尺寸修改里面的 HTML 文字大小

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

html {

font-size: 50px;

}

@no: 15; /* 将屏幕宽度划分为 15 份 */

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

html {

font-size: 320px / @no;

}

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

html {

font-size: 360px / @no;

}

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

html {

font-size: 375px / @no;

}

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

html {

font-size: 384px / @no;

}

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

html {

font-size: 400px / @no;

}

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

html {

font-size: 414px / @no;

}

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

html {

font-size: 424px / @no;

}

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

html {

font-size: 480px / @no;

}

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

html {

font-size: 540px / @no;

}

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

html {

font-size: 720px / @no;

}

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

html {

font-size: 750px / @no;

}

4. 创建 index.less文件并在 index.less 导入 common.less

创建 index.less文件并在 index.less 导入 common.less。使用 @import "" 导入。

@import "common.less";

5. 注意

页面元素大小(rem) = 页面元素(px) / html字体大小；

如 width 为 100px 的盒子要实现不同页面等比例缩放，写法如: width = 100rem / html字体大小。

苏宁css代码生成器,【前端】06 - rem + less + 媒体查询 - 制作苏宁首页相关推荐

移动端适配+响应式布局+从设计图到CSS（rem+viewport+媒体查询+Sass）
转自:https://www.cnblogs.com/gymmer/p/6883063.html 根据UI图对移动端的h5页面做样式重构,是前端工程师的本职工作,看似简单,不过想做好却并不容易.下面总 ...
rem结合媒体查询适配的vue项目（PC端和移动端共用一套代码）
一.前言上周四接到了一个简单的纯前端网页的项目,我用了三天时间已经开发并且部署完毕(为了实现快速简易部署,使用了gitee pages进行部署,这篇文章记录我使用gitee pages部署的详细过程 ...
459~486（rem+媒体查询+Less+苏宁易购移动端首页）
1 rem基础 rem单位 rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-si ...
vscode使用rem、媒体查询@media（图文详解，代码展示）
rem适配布局一.rem单位 em是相对于父元素的字体大小来说的,例:父亲的font-size:10px,孩子的width:10em表示是100px: rem是相对于html的字体大小,例: ...
CSS之七个高度有效的媒体查询技巧
我们都知道,Media Queries是实现响应式设计的秘密武器.在这篇文章中,将向大家介绍制定高质量的Media Queries需要注意的一些事项 1. 让内容确定断点很多时候,在响应式设计中,你 ...
html5移动端开发(rem和媒体查询@media)
css下:index.css @charset "utf-8"; body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fields ...
【CSS】利用宽高比例的媒体查询
aspec-ratio 取值:value (x/y) 接收min/max前缀:是 aspect-ratio描述了输出设备目标显示区域的宽高比.该值包含两个以/分隔的正整数.代表了水平像素数(第一个值) ...
前端移动端适配 - 媒体查询适配方案
背景工作中难免会有写静态页面的需求,有时候移动端适配真的是做的心累,如果自己新做一个页面倒还好,整体布局会按照自己习惯来,但有时候不得不修改别人的代码,尤其是别人没适配好的代码,找样式以及命名规范等 ...
使用两种rem布局方案-实现静态苏宁易购移动端首页
使用两种rem布局方案-实现静态苏宁易购移动端首页方案1:rem+less+媒体查询 html common.less index.less 方案2:flexible.js+rem 小插件小问题 ...

苏宁css代码生成器,【前端】06 - rem + less + 媒体查询 - 制作苏宁首页

苏宁css代码生成器,【前端】06 - rem + less + 媒体查询 - 制作苏宁首页相关推荐

最新文章

热门文章