web前端问题整理

一、html、css篇

1. 处理h5标签兼容性问题

2.移动web开发时，屏幕自适应

（content="user-scalable=no 这一项为不允许用户手势缩放）

3.css中宽高设置百分比表示

宽和高相对父盒子

width: 50%;

height: 50%

相对于父盒子宽度

padding: 10% 20%;

相对于父盒子宽度

margin: 10% 20%;

4.line-height 的详解

设置数值和百分比的时候，如果父盒子没有设置行高的话，子盒子的行高根据自身字体大小来设置

line-height 设置为百分比时，同时父盒子设置了行高，子盒子行高以父盒子字号为参考

line-height 设置为数值，同时父盒子设置了行高，子盒子行高以自身字号为参考

5.媒体查询

@media only screen and (width: 414px) {

body {

background-color: blue;

}

}

上面代码表示手机屏幕宽像素为414的时候，body背景颜色变为蓝色 （其实bootstrap 内部就是按照这个原理实现的）

肖像（坚屏）模式

@media only screen and (orientation: portrait) {

body {

background-color: blue;

}

}

全景（横屏）模式

@media screen and (orientation: landscape) {

body {

background-color: red;

}

}

6.rem也是一个相对的长度单位，参照的是html根元素的字号

1rem = 1html元素字号

以下是常见的手机媒体查询（是将psd和手机屏幕都分成25份来进行适配的）

@media screen and (width: 320px) {

html {

font-size: 12.8px;

}

}

@media screen and (width: 360px) {

html {

font-size: 14.4px;

}

}

@media screen and (width: 375px) {

html {

font-size: 15px;

}

}

@media screen and (width: 400px) {

html {

font-size: 16px;

}

}

@media screen and (width: 414px) {

html {

font-size: 16.56px;

}

}

7.swper 插件使用在css中先写下这些，之后引入swper.js (这是官网地址http://www.swiper.com.cn/demo/index.html)

.swipe {

overflow: hidden;

visibility: hidden;

position: relative;

}

.swipe-wrap {

overflow: hidden;

position: relative;

}

.swipe-wrap > li {

float: left;

width: 100%;

position: relative;

}

window.mySwipe = new Swipe(document.getElementById('slider'), {

startSlide: 2, 滑动的索引值,即从*值开始滑动，默认值为0

speed: 400, 滑动的速度，默认值300毫秒

auto: 3000, 自动滑动，单位为毫秒

continuous: true, 是否循环滑动，默认值为true

disableScroll: false, 停止任何触及此容器上滚动页面，默认值flase

stopPropagation: false, 停止事件传播,默认值flase

callback: function(index, elem) {}, 回调函数

transitionEnd: function(index, elem) {} 滑动过渡时调用的函数

});

8.栅格系统~~~~~~~~~~~~~1！！！！！！！！具体使用查看 http://v3.bootcss.com/css/#grid

bootstrap 官方网站想学习的同学自行去学习 http://v3.bootcss.com/

9.less语法

@color: red; //定义一个变量

body {

background-color: @color; //使用这个变量

}

可以先模拟定义一个函数然后调用

.box-sizing() {

-webkit-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

}

// 定义了一个可以传参的“函数”

// 也可设置默认参数

.border-radius(@radius: 5px) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

border-radius: @radius;

}

nav {

.box-sizing();

.border-radius(10px);

}

header {

.box-sizing();

.border-radius(8px);

}