内容简介：自从移动手机的广泛使用前端的需求量逐渐增多，那么移动端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。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
CSS 压缩/解压工具
在线压缩/解压 CSS 代码