Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询
实际开发搞搞起来！！！！
rem适配方案
媒体查询+rem+less
基础知识铺垫
- 第一步，我们需要拿到设计稿，安装设计稿的要求来设置一个合适的html字体大小。
- 第二步，计算元素大小的取值 页面rem = 页面元素值（设计稿） / (屏幕的宽度/划分的份数)
- (屏幕的宽度/划分的份数) = html大小
- 这个算法你也不需要太纠结，按照这个来就是
最后终结一下：
- 首先我们选一套标准尺寸 750为准
- 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
- 页面元素的rem值 = 页面元素在 750像素的下px值 / html 里面的文字大小 */
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@media screen and (min-width: 320px) {
html {
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 50px;
}
}
div {
width: 2rem;
height: 2rem;
background-color: pink;
}
/* 1. 首先我们选一套标准尺寸 750为准
2. 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
/* 3. 页面元素的rem值 = 页面元素在 750像素的下px值 / html 里面的文字大小 */
@media screen and (min-width:320px) {
html {
font-size: 21.33px;
}
}
@media screen and (min-width:750px) {
html {
font-size: 21.33px;
}
}
div {
width: 2rem;
height: 2rem;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
仿苏宁首页
方案是单独写页面，技术是 rem+媒体查询+less，设计稿是750的
以下是部分的核心代码，
关于样式的初始化，我就不多强调了，设置视口标签，引入normalize.css ，设置 body样式，链接高亮等。注意一下细节问题，一个less中可以引入另一个less，这种使用方法在后期的node开发很重要---（@import "common";）
+++
// common.lss设置公共的样式，给站点里的所有页面都设置一个方便很多了
// 设置常见的屏幕尺寸 修改里面的html文字大小
//设置相关的不同的媒体适配html大小，根据不同的屏幕尺寸
/*强调以下，由于不同的屏幕下字体的大小不一样，为了保证可以达到等比例的缩放，我们需要给屏幕划分相同的份数*/
a {
text-decoration: none;
}
// 一定要写到最上面，代码执行从上到下，你要写在上面
// 在pc端上打开的时候限定50px
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;
}
}
body {
min-width: 320px;
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}
+++
index.less
// 页面元素rem计算公 = (页面元素的px) / (html 字体大小 50)
// 小提问等你来回到，为什么这里是是50？50哪儿蹦出来的，我们只是知道设计稿的宽度是750
// search-content
@baseFont: 50;
.search-content {
display: flex;
/*我们也还是使用了flex布局*/
position: fixed;
top: 0;
left: 50%;
/*注意一下这里的居中对齐，固定定位的盒子，最好使用translateX来实现居中*/
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，这个是设置去掉蓝色边框
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 {
width: 750rem / @baseFont;
height: 368rem / @baseFont;
// 注意一下盒子里面的图片也跟着变化
img {
width: 100%;
height: 100%;
}
}
+++
flexible+rem+less
这个是手机淘宝 团队写的一个适配库 ，我们不在需要写媒体查询了。
注意一下这里我们省去了less，我们直接写css。我们使用了一个vs上的一个插件，cssrem快速的转化我们的单位代码，注意一下修改它的配置，这个的好处就是我们不需要再用less除来除去咯
以下是部分的核心代码，完整的项目请在github上链接我，别忘了给我 ” 小星星“哦
@media screen and (min-width: 750px) {
html {
font-size: 75px!important;
/* width: 75px; */
}
}
/* search-content */
.search-content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10rem;
height: 1.173333rem;
background-color: #FFC001;
}
Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询的更多相关文章
- 《工作笔记：移动web页面前端开发总结》
工作笔记:移动web页面前端开发总结 移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (I ...
- 移动web页面前端开发总结
移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的 ...
- 2008年最佳Web设计/前端开发技巧、脚本及资源总结
工具&Web应用 13个可能会让你说”Thank You”的必不可少的开源应用 14个免费工具让你了解为什么人们会放弃访问你的网站 40+CSS生成器 74个我们可能已经忘记的适合网页设计师的 ...
- WEB常用前端开发调试工具介绍
只要是设计开发,就需要进行调试,尽管相对来说,前端的调试要简单一些,但使用一些调试工具或插件还是能提高你的工作效率.下面是一些主要用于IE浏览器环境和Firefox浏览器环境等的调试工具简介. 一.I ...
- Web移动前端开发-——bootstarp响应式框架
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕 ...
- 前端开发必备组件库【基于原生js、兼容主流浏览器、B/S必备】
[持续更新中...跪求点击右上角星星,好人一生平安!] API详见github,链接如下: https://github.com/pomelott/pomelo-plug-in
- 前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析
前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ru ...
- 【前端开发】】ES6属性promise封装js动画
如下是我写的demo源码: 可以直接复制用浏览器打开看到效果哦: <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 在做APP前端开发时应注意的一些问题
在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...
随机推荐
- 定位（left 、right 、top 、 bottom）、padding、margin 值设为百分比值时
定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...
- gcc/g++/make/cmake/makefile/cmakelists的恩恩怨怨
以前在windows下用VS写代码,不管有多少个文件夹,有多少个文件,写完以后只需要一键就什么都搞定了.但是当移步linux下时,除非你使用图形界面,并且使用Qt creater这类的IDE时,才可以 ...
- VS2017+EF6+MySQL8.0配置(.Net Framework 4.5）
开发环境Vs2017 运行环境:.Net Framework 4.5(win7专业版 64位) 1.下载安装mysql数据库版本:mysql-8.0.19-winx64 ----数据库版本貌似跟My ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单帮助文本
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- hdu 1599 find the mincost route floyd求无向图最小环
find the mincost route Time Limit: 1000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/O ...
- 【剑指Offer面试编程题】题目1523：从上往下打印二叉树--九度OJ
题目描述: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 输入: 输入可能包含多个测试样例,输入以EOF结束. 对于每个测试案例,输入的第一行一个整数n(1<=n<=1000, ...
- 微信内置浏览器video标签自动全屏的问题
微信打开h5video视频的时候都会自动全屏播放,有时候影响用户体验 要禁止自动全屏就要加这几个属性 'x5-playsinline':'true', 'webkit-playsinline':'tr ...
- Redis详解（一）——RDB
Redis详解(一)--RDB 前言 由于 Redis 是一个内存数据库,所谓内存数据库,就是将数据库中的内容保存在内存中,这与传统的MySQL,Oracle等关系型数据库直接将内容保存到硬盘中相比, ...
- IOS 常用View属性设置
设置按钮属性 1.设置按钮背景颜色 backgroundColor @property (weak, nonatomic) IBOutlet UIButton *deleteButton; self. ...
- Git安装及基本配置
一.在Linux上安装 1.Linux系统安装 使用Linux发布版包含的基础软件包管理工具可以很容易安装Git.例如,在Ubuntu系统上可使用以下指令安装Git: $ sudo apt-get i ...