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语言进阶

C语言进阶

牟海军 / 机械工业出版社 / 2012-7 / 59.00元

C语言是编程语言中的一朵奇葩,虽已垂垂老矣,但却屹立不倒,诞生了数十年,仍然是最流行的编程语言之一。C语言看似简单,却不易吃透,想要运用好,更是需要积淀。本书是一本修炼C程序设计能力的进阶之作,它没有系统地去讲解C语言的语法和编程方法,而是只对C语言中不容易被初学者理解的重点、难点和疑点进行了细致而深入的解读,揭露了C语言中那些鲜为普通开发者所知的秘密,旨在让读者真正掌握C语言,从而编写出更高质量......一起来看看 《C语言进阶》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具