css常用技巧

栏目: CSS · 发布时间: 5年前

内容简介:自从移动手机的广泛使用前端的需求量逐渐增多,那么移动端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。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

失控的未来

失控的未来

[美]约翰·C·黑文斯 / 仝琳 / 中信出版集团 / 2017-4-1 / 59.00元

【编辑推荐】 20年前,尼古拉•尼葛洛庞帝的《数字化生存》描绘了数字科技给人们的工作、生活、教育和娱乐带来的冲击和各种值得思考的问题。数字化生存是一种社会生存状态,即以数字化形式显现的存在状态。20年后,本书以一种畅想的形式,展望了未来智能机器人与人类工作、生活紧密相联的场景。作者尤其对智能机器人与人类的关系,通过假设的场景进行了大胆有趣的描述,提出了人工智能的未来可能会面临的一些问题。黑文......一起来看看 《失控的未来》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具