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