网站交易平台,中小学网站建设建议,南宁网站建设平台,网站建设信息在哪儿发布目录
1. rem基础
2.媒体查询
2.1 语法规范
2.2 媒体查询rem
2.3 引入资源#xff08;理解#xff09;
3. less基础
3.1 维护css的弊端
3.2 less介绍
3.3 less变量
3.4 less编译
3.5 less嵌套
3.6 less运算
4. rem适配方案
4.1 rem实际开发
4.2 技术使用
4.3 …目录
1. rem基础
2.媒体查询
2.1 语法规范
2.2 媒体查询rem
2.3 引入资源理解
3. less基础
3.1 维护css的弊端
3.2 less介绍
3.3 less变量
3.4 less编译
3.5 less嵌套
3.6 less运算
4. rem适配方案
4.1 rem实际开发
4.2 技术使用
4.3 rem媒体查询less
5. 苏宁网首页案例制作
6. rem适配方案2 1. rem基础 2.媒体查询 2.1 语法规范 /* 媒体查询一般按照从大到小或从小到大的顺序 *//* 样式具有层叠性 *//* screen and 不能省略 *//* 数字后面必须跟单位,and后面要跟空格 */media screen and (max-width:539px) {body {background-color: blue;}}media screen and (min-width:540px) {body {background-color: green;}}media screen and (min-width:970px) {body {background-color: red;}}
2.2 媒体查询rem media screen and (min-width:320px) {html {font-size: 50px;}}media screen and (min-width:640px) {html {font-size: 100px;}}.top {height: 1rem;font-size: .5rem;background-color: green;color: #fff;text-align: center;line-height: 1rem;}
2.3 引入资源理解 !-- 媒体查询最好从小到大写 --!-- 引入资源就是针对不同屏幕尺寸,调用不同的css文件 --link relstylesheet hrefstyle320.css mediascreen and (min-width:320px)link relstylesheet hrefstyle640.css mediascreen and (min-width:640px)
3. less基础
3.1 维护css的弊端 3.2 less介绍 3.3 less变量 3.4 less编译 3.5 less嵌套 3.6 less运算 除法运算要加小括号才能算 4. rem适配方案 4.1 rem实际开发 4.2 技术使用 4.3 rem媒体查询less 5. 苏宁网首页案例制作 将样式文件导入样式文件中 index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0 /meta http-equivX-UA-Compatible contentieedgelink relstylesheet hrefcss/normalize.csslink relstylesheet hrefcss/index.csstitleDocument/title
/headbody!-- 顶部搜索框 --div classsearch-contenta href# classclassify/adiv classsearchform actioninput typesearch value厨卫保暖季/form/diva href# classlogin登录/a/div!-- banner 部分 --div classbannerimg srcupload/banner.gif alt/div!-- 广告部分 --div classada href#img srcupload/ad1.gif alt/aa href#img srcupload/ad2.gif alt/aa href#img srcupload/ad3.gif alt/a/div!-- nav --nava href#img srcupload/nav1.png altspan爆款手机/span/aa href#img srcupload/nav1.png altspan爆款手机/span/aa href#img srcupload/nav1.png altspan爆款手机/span/aa href#img srcupload/nav1.png altspan爆款手机/span/aa href#img srcupload/nav1.png altspan爆款手机/span/aa href#img srcupload/nav1.png altspan爆款手机/span/aa href#img srcupload/nav1.png altspan爆款手机/span/aa href#img srcupload/nav1.png altspan爆款手机/span/aa href#img srcupload/nav1.png altspan爆款手机/span/aa href#img srcupload/nav1.png altspan爆款手机/span/a/nav
/body/html
common.less
// 设置常见屏幕尺寸修改里面的html文字大小
a {text-decoration: none;
}html {// pc端也可以打开font-size: 50px;
}// 本次定义划分的份数为15
no: 15;
media screen and (min-width: 320px) {html {font-size: (320px / no);}
}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);}
}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: (375px / no);}
}media screen and (min-width:424px) {html {font-size: (424px / no);}
}media screen and (min-width:480px) {html {font-size: (480x / 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);}
}
index.less
// 将样式文件导入样式文件中
import common;body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, sans-serif;background: #f2f2f2;
}// search-content
baseFont: 50rem;.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translate(-50%);width: 15rem;height: (88rem / baseFont);background-color: #ffcc01;.classify {width: (44 / baseFont);height: (70 / baseFont);background: url(../images/classify.png);background-size: (44 / baseFont) (70 / baseFont);margin: (11 / baseFont) (25 / baseFont) (7 / baseFont) (24 / baseFont);}.search {flex: 1;input {// 去掉输入时的边框效果outline: none;width: 100%;border: 0;height: (66 / baseFont);border-radius: (33 / baseFont);background-color: #fff2cc;margin-top: (12 / baseFont);font-size: (25 / baseFont);color: #757575;padding-left: (55 / baseFont);}}.login {width: (75 / baseFont);height: (70 / baseFont);margin: (10 / baseFont);font-size: (25 / baseFont);text-align: center;color: #fff;line-height: (70 / baseFont);}
}// banner
.banner {width: (750 / baseFont);height: (368 / baseFont);img {width: 100%;height: 100%;}
}// ad
.ad {display: flex;a {flex: 1;img {width: 100%;}}
}// nav
nav {width: (750 / baseFont);a {float: left;width: (150 / baseFont);height: (140 / baseFont);text-align: center;img {display: block;width: (82 / baseFont);height: (82 / baseFont);margin: (10 / baseFont) auto 0;}span {display: block;font-size: (25 / baseFont);color: #333;margin-top: 5px;}}
}
6. rem适配方案2
flexible.js rem 插件 cssrem 可以将px转换成rem
这个插件默认的html文字大小 cssroot 16px
在设置中搜索设置 cssroot 将工作区的font size 设置为想要的。
index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, user-scalableno,initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgelink relstylesheet hrefcss/normalize.csslink relstylesheet hrefcss/index.css!-- 引入我们的flexible.js 文件 --script srcjs/flexible.js/scripttitleDocument/title
/headbodydiv classsearch-contenta href# classclassify/adiv classsearchform actioninput typesearch valuerem适配方案2很开心哦/form/diva href# classlogin登录/a/div
/body/html
index.css
body {min-width: 320px;max-width: 750px;/* flexible 给我们划分了 10 等份 */width: 10rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2;}a {text-decoration: none;font-size: .333333rem;
}/* 这个插件默认的html文字大小 cssroot 16px *//*
img {width: 5.125rem;height: 4rem;width: 1rem;width: 1.093333rem;height: 1rem;
} *//* 如果我们的屏幕超过了 750px 那么我们就按照 750设计稿来走 不会让我们页面超过750px */media screen and (min-width: 750px) {html {font-size: 75px !important;}
}/* search-content */.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 10rem;height: 1.173333rem;background-color: #FFC001;
}.classify {width: .586667rem;height: .933333rem;margin: .146667rem .333333rem .133333rem;background: url(../images/classify.png) no-repeat;background-size: .586667rem .933333rem;
}.search {flex: 1;
}.search input {outline: none;border: 0;width: 100%;height: .88rem;font-size: .333333rem;background-color: #FFF2CC;margin-top: .133333rem;border-radius: .44rem;color: #757575;padding-left: .733333rem;
}.login {width: 1rem;height: .933333rem;margin: .133333rem;color: #fff;text-align: center;line-height: .933333rem;font-size: .333333rem;
}
