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);

}

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180718B1JKAT00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券