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应用的前端开发中,又要注意什么问题呢?一. ...
随机推荐
- Django 学习 之ORM聚合查询分组查询与F查询与Q查询
一．聚合查询和分组查询 1.聚合查询aggregate 关于数据表的数据请见上一篇:Django 学习 之ORM多表操作(点我) aggregate(*args, **kwargs),只对一个组进行聚 ...
- smoj2828子数组有主元素
题面 一个数组B,如果有其中一个元素出现的次数大于length(B) div 2,那么该元素就是数组B的主元素,显然数组B最多只有1个主元素,因为数组B有主元素,所以被称为"优美的" ...
- C#调用Win32 的API函数--User32.dll ----转载
Win32的API函数是微软自己的东西,可以直接在C#中直接调用,在做WinForm时还是很有帮助的.有时候我们之直接调用Win32 的API,可以很高效的实现想要的效果. using System; ...
- 【剑指Offer面试编程题】题目1385：重建二叉树--九度OJ
题目描述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7 ...
- vue2 Excel导出数据 js-xlsx的使用
vue2 Excel导出数据 js-xlsx的使用 https://www.jianshu.com/p/ea115a8e9107 小世界最温暖 关注 2018.11.19 16:08 字数 280 阅 ...
- Android数据库高手秘籍(二)：创建表和LitePal的基本用法
原文:http://blog.jobbole.com/77157/ 上一篇文章中我们学习了一些Android数据库相关的基础知识,和几个颇为有用的SQLite命令,都是直接在命令行操作的.但是我们都知 ...
- Java中的协变与逆变
Java作为面向对象的典型语言,相比于C++而言,对类的继承和派生有着更简洁的设计(比如单根继承). 在继承派生的过程中,是符合Liskov替换原则(LSP)的.LSP总结起来,就一句话: 所有引用基 ...
- IOS 导航栏颜色 标题
修改导航栏颜 #define COLOR_TOMATO [UIColor colorWithRed:255/255.0f green:99/255.0f blue:71/255.0f alpha ...
- python类的对象使用
class student(): def __init__(self,age,sex): self.age = age self.sex = sex #self._ ...
- ubuntu安装discourse论坛----结合在apache服务上建立虚拟主机
指导操作:https://github.com/discourse/discourse/blob/master/docs/INSTALL-cloud.md 一.先安装 Docker / Git: wg ...