内容简介：自从移动手机的广泛使用前端的需求量逐渐增多，那么移动端h5,css3成为必会技巧，面试中面试官会经常询问到适配和实现一个什么动画的效果。一.响应式开发一般我们会在页面的代码中设置这样的属性，viewport是指屏幕上能够用来显示网页的区域，默认情况下是980像素。为什么能在移动端切换自动铺满屏幕，功劳在于meta标签。
自从移动手机的广泛使用前端的需求量逐渐增多，那么移动端h5,css3成为必会技巧，面试中面试官会经常询问到适配和实现一个什么动画的效果。
一.响应式开发
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">复制代码
一般我们会在页面的代码中设置这样的属性，viewport是指屏幕上能够用来显示网页的区域，默认情况下是980像素。为什么能在移动端切换自动铺满屏幕，功劳在于meta标签。
meta标签的属性如下：
- width:设置viewport的宽度，为正整数，或者字符串“device-width”
- initial-scale:缩放值
- minimum-scale:最小缩放值
- maximum-scale:最大缩放值
- height:viewport高度
1.flex是常用的布局技巧，包含多种属性：
flex-direction 决定主轴方向
flex-wrap 默认在主轴方向，项目排在轴线上，如果超出一行该属性定义如何换行， 包括nowrap wrap
justify-content 定义项目在主轴上的对齐方式 center.space-between.space-around
aline-items 定义项目在交叉轴的对齐方式 center是常用属性
2.rem
rem是由跟元素的字号来决定大小。一般会配置一个文件来引入来达到一个适配的效果
（function(){
//获取跟元素对象
var de = document.documentElemnet;
function resetFontseize(){
var w = de.setBoundClientRect().width;//获取浏览器宽度
if(w>640)w=640;
de.style.fontSize =(w/10)+'px'//为跟元素负值
}
resetFontseize（）；
//页面大小改变时候，重新设置元素字号
window.addEventListner('resize',resetFontseize，false)；//页面大小改变时候重新设置很元素的的字号
}）（）复制代码
其实rem布局的本质是等比缩放，一般是基于宽度来进行缩放 ，使用到javascript来动态改变html标签font-size的大小，其他的rem单位的数值就会被浏览动态计算转为px单位，从而达到和设计图高度的相似。 750：100=获取到的屏幕大小：html标签的px单位的值
设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 100px， 设计稿宽度：600px
移动设备：600px， 那么 1rem = 100px。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
The Creative Curve
Allen Gannett / Knopf Doubleday Publishing Group / 2018-6-12
Big data entrepreneur Allen Gannett overturns the mythology around creative genius, and reveals the science and secrets behind achieving breakout commercial success in any field. We have been s......一起来看看 《The Creative Curve》 这本书的介绍吧!
