CSS9:动态 REM-手机专用的自适应方案
CSS9:动态 REM-手机专用的自适应方案
动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,
例如 : taobao.com 是专门的PC端
m.taobao.com 是专门的手机端,如果用电脑短访问网页布局就很奇怪
就像用手机访问pc端没有自适应的网站一样
当别人问会不会移动端开发,说会就行了,因为我会了动态REM!手机专用
1.REM是什么
em:一个m的宽度.如果面试官问,就说是一个汉字的宽度.这个单位是相对于font-size的
rem:root em,根元素的font-size.即<html>
的font-size.rem是相对于html
的font-size
的
vh:视口高度,总共100vh
vw:视口宽度,总共100cw
MDN-length
2. 12像素法则
网页的默认font-size是16px.
chrome浏览器默认设置能显示的最小字体是12px,也就是说如果给css样式小于12px,那么还会显示12px.这需要手动设置才行.但浏览器用户一般都不会去设置这个.所以让字体不要小于12像素,否则chrome浏览器没法显示
而firefox和safir浏览器就没有这个限制
3. em和rem的区别
对于汉字来说,宽高一样,所以font-size
高度就是1个em的值(M这个字宽高基本一致,且宽度就是一个汉子的宽度.所以叫em)
区别:
em:自己的font-size
的值
rem:根元素的font-size
4.动态REM
做响应式之前需要四个设计图(没图不做.因为设计不是前端该做的事,没有完整最终确定的的设计图之前,不要写代码.):
一个是窄屏,一个是宽屏,一个是ipad,一个是手机端的
不同的屏幕得到不同的样子算式响应式.
这篇博客不讨论响应式.只看手机端怎么做.
4.1手机端出现的问题:
pc端只需要选一个布局,然后定宽就可以了,
但是手机端,手机太多.
各种宽度像素都有很多.没有办法做响应式,
解决方法:
- 使用百分比:例如,宽度5%,40%,让它始终自适应.
- 整体缩放:做一个图,然后遇到宽度不一样的情况就整体缩放
4.2手机上百分比布局,固定宽度布局缺点
百分比布局缺点:宽度容易确定,因为可以和父容器作比较,是相对于父容器的.但是高度很难确定,比如高度写成20%,没有写过,想做一个宽高1:2的div,没法做,有很强的不确定性.高度没有办法跟宽度做任何的配合
如果想写出下面的设计
假设固定宽度为320px,固定宽高后出现的问题:
即如果手机宽度变化,那么就不会适应屏幕变化
如果居中,两侧就会变大,固定宽度只能让别的宽度的手机看到320px宽度的样子
想要的效果是所有元素按比例放大
单位应该相对于宽度,才能很好地还原设计稿
px,em都不行,vw可以,但是vw兼容性太差
所以退而求其次
4.3 最终解决方案
rem依赖的是<html>
的font-size
,使用js使<html>
的font-size
依赖pagewidth,那么rem就间接地依赖于页面的pagewidth
所以引入REM方案
在<head>
标签里加上如下代码,让1rem等于页面宽度
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>动态REM</title>
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>
</head>
使用上面代码,使长度单位相对于页面宽度定义,从而适应任何不同屏幕尺寸的手机
不管屏幕宽度如何变化,布局总是完美适应屏幕
4.4优化
- rem小于1不方便写
将pageWidth/100,于是就将款入分为100rem,刚才的0.4rem就可以写成40rem.这样用起来像vw.但是有一个问题
谷歌浏览器字体设置不能小于12px,所以除以100后,html标签的font-size变成了12px.
解决方法:之缩小10倍即可,10rem为页面总宽度 - rem和其他长度单位混用
因为border这种小的单位,让它固定就可以,不需要缩放,因为1px缩放,border还显示1px.如果5px缩放,不显示2.5px,值显示2px,px不会变成小数.
font-size也不必缩放,将所有屏幕的手机font-size设置成一样大小,显示不影响美观
5.使用sass自动将设计稿的px转换为rem
px需要算,很麻烦。假如设计师给的设计稿是只有640px的宽度的一个设计稿,里面有一个div是256px×128px,那么宽度的rem就是256/64010rem,高度的rem就是128/64010rem,全部换成rem之后,所有的手机页面才能自动缩放。 这样的缺点显而易见,难道自己要一点点算rem的值?
有没有什么办法可以将px转换为rem并交给程序来做?有,sass。
一定要强制自己用命令行,强制自己学英语,强制自己看文档。
只有这三条都做了,才有可能成为前端水平20%的程序员。
现在前端很多工具没有窗口界面,我已经装了linu虚拟机,安装软件等工具包只需要一条命令,很方便。
5.1 安装并使用sass
使用npm安装(linux环境)
因为国内特殊的网络环境,不能直接安装,所以需要先设置国内的镜像,设置淘宝源npm config set registry https://registry.npm.taobao.org/
touch ~/.bashrc
设置之后还没用,因为node-sass会下载亚马逊上的一个资源,所以要设置一下,从淘宝上下载资源,不要去国外下载echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
source ~/.bashrc
全局安装npm i -g node-sass
如果使用windows,那么一定会报错,我也不知道为什么,所以推荐从现在开始,编程使用linux或者mac,安装工具就一句命令行的事情。如果放不下windows,就在Windows上装虚拟机,在安装深度linux,deepin或ubantu都可以。
安装好之后,接下来做个示例:mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/style.scss
start scss/style.scss
在scss文件夹里创建style.scss接下来:
node-sass -wr scss -o css
使用上面的命令监听scss文件夹。开始实验:
这时候编辑 scss 文件就会自动得到 css 文件
例如,在style.scss里写
html{
color:red;
p{
color:blue;
}
}
在css里没有这样的语法
这时观察css文件
自动转化成符合正确语法的css语句
所以,
在 scss 文件里添加:
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度,你要根据设计稿的宽度填写。设计师的设计稿宽度需要统一
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
那么相应得,css这时会将px自动变成em(宽度为640px的情况下)
.child {
width: 5rem;
height: 2.5rem;
margin: 0.625rem 0.625rem;
border: 1px solid red;
float: left;
font-size: 1.2em; }
这样就无需在手动换算rem的值了。
CSS9:动态 REM-手机专用的自适应方案的更多相关文章
- css3 rem手机自适应框架
css3 rem手机自适应框架 rem是按照html的字体大小来 所以 不同宽度浏览器 htmlfont-size不一样 就可以做到自适应了 此方法比百分比方便<pre><!DOCT ...
- rem 是如何实现自适应布局的
摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.本文讲的是如何使用rem实现自适应.· rem这是个低调的css单位,近一 ...
- rem是如何实现自适应布局的
原文链接:http://caibaojian.com/web-app-rem.html 摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算 ...
- 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- Web移动端页面 --响应式和动态REM
响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐 ...
- finereport普通报表的移动端自适应方案
移动端报表呈现,首先要求的是页面随手机屏幕大小自动放缩(自适应),下面给出一个普通报表中的finereport移动端自适应方案,适用于finereport 7.1之前的版本. 首先,了解一下当前我们可 ...
- 动态rem与1px边框问题的理解
当我们在项目开发中,拿到设计师的设计图,满怀欣喜的准备按照设计图将页面实现出来的时候,我们通常会遇到这个问题: 如何将页面的内容按照在不同手机屏幕浏览的情况下,比例都是不变的呢?这个时候我们就需要使用 ...
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- 手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应
转自 http://my.oschina.net/cart/blog/282477 做前端开发不短了,用过jQuery Mobile jqMobi 也纯手工写过.. 最后总结如下: jQuery Mo ...
随机推荐
- [HG]奋斗赛M
题A 请进入链接↑ 题B 请进入链接↑ 题C 请进入链接↑ 题D 请进入链接↑ 题E 请进入链接↑ 题F 懒得写了,借用一下Chtholly_Tree巨 ...
- Spring Security 3.1 中功能强大的加密工具 PasswordEncoder
Spring Security 3.1 中功能强大的加密工具 PasswordEncoder 博客分类: security spring springsecurity 好吧,这种加密机制很复杂,还是 ...
- BUUCTF |[0CTF 2016]piapiapia
步骤: nickname[]=wherewherewherewherewherewherewherewherewherewherewherewherewherewherewherewherewhere ...
- science_action
w import random import pprint import math import matplotlib.pyplot as plt def gen_random(magnify_=10 ...
- 服务器-Web服务器-Tengine:Tengine 百科
ylbtech-服务器-Web服务器-Tengine:Tengine 百科 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.它 ...
- day22—一个AngularJS框架应用toDoList
转行学开发,代码100天——2018-04-07 今天用AngularJS照着课程写了一个案例,即toDoList,记事清单效果. 主要实现以下效果: 1.通过文本框添加内容,同时添加事件列表.主要用 ...
- CentOS7 - 安装 VirtualBox
参考资料 最新的可用安装包可以从这里下载 VirtualBox 是 x86 硬件虚拟化产品,功能上与 VMware Server.KVM.及 Xen 类似,但是 VirtualBox 不修改 Linu ...
- springMvc中自定义bean转换接收前台传的参数
转载:https://blog.csdn.net/u013476435/article/details/81538099 因前端整体传参时,参数名都不是驼峰写法,类似 music_name,music ...
- Recurrent Neural Network(2):BPTT and Long-term Dependencies
在RNN(1)中,我们将带有Reccurent Connection的node依照时间维度展开成了如下的形式: 在每个时刻t=0,1,2,3,...,神经网络的输出都会产生error:E0,E1,E2 ...
- 《JAVA设计模式》之组合模式(Composite)
在阎宏博士的<JAVA与模式>一书中开头是这样描述合成(Composite)模式的: 合成模式属于对象的结构模式,有时又叫做“部分——整体”模式.合成模式将对象组织到树结构中,可以用来描述 ...