前端自适应样式reset.css
@charset "utf-8"; /* CSS Document */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
margin:;
padding:;
} fieldset,
c {
border: none;
} img {
display: block;
} address,
caption,
cite,
code,
dfn,
th,
var {
font-style: normal;
font-weight: normal;
} ul,
ol,
li {
list-style: none;
} body {
color: #333;
font: 12px Arial,"Microsoft Yahei",sans-serif;
background: #fff;
} a {
color: #fff;
text-decoration: none;
} /*清除浮动*/
.clear {
clear: both
} * {
box-sizing: border-box
} .border-1px::after {
content: '';
position: absolute;
top:;
left:;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
pointer-events: none;
} body,
html,
#app {
height: 100%;
background: #f5f5f5;
} @media (min-width: 240px) {
html {
font-size: 32px;
}
} @media (min-width: 320px) {
html {
font-size: 42.66667px;
}
} @media (min-width: 360px) {
html {
font-size: 48px;
}
} @media (min-width: 375px) {
html {
font-size: 50px;
}
} @media (min-width: 384px) {
html {
font-size: 51.2px;
}
} @media (min-width: 411px) {
html {
font-size: 54.8px;
}
} @media (min-width: 414px) {
html {
font-size: 55.2px;
}
} @media (min-width: 424px) {
html {
font-size: 56.53333px;
}
} @media (min-width: 480px) {
html {
font-size: 64px;
}
} @media (min-width: 540px) {
html {
font-size: 72px;
}
} @media (min-width: 640px) {
html {
font-size: 85.33333px;
}
} @media (min-width: 720px) {
html {
font-size: 96px;
}
} @media (min-width: 750px) {
html {
font-size: 100px;
}
} @media (min-width: 768px) {
html {
font-size: 102.4px;
}
} @media (min-width: 800px) {
html {
font-size: 106.66667px;
}
} @media (min-width: 980px) {
html {
font-size: 130.66667px;
}
} @media (min-width: 1024px) {
html {
font-size: 136.53333px;
}
} @media (min-width: 1080px) {
html {
font-size: 144px;
}
} @media (min-width: 1152px) {
html {
font-size: 153.6px;
}
} @media (min-width: 1366px) {
html {
font-size: 182.13333px;
}
} @media (min-width: 1440px) {
html {
font-size: 192px;
}
} @media (min-width: 2160px) {
html {
font-size: 288px;
}
}
前端自适应样式reset.css的更多相关文章
- 前端自适应样式(reset.css)
@charset "utf-8"; /* CSS Document */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4 ...
- 移动端(处理边距样式)reset.css
移动端reset.css,来自张鑫旭网站的推荐,下载地址:https://huruqing.gitee.io/demos/source/reset.css 代码 /* html5doctor.com ...
- 页面重置样式reset.css
我把经常用到的一些页面重置样式归类到了一个.css文件中,这样可以减少代码冗余.当然还有其他的很多用处,比如h1~h5的样式全部统一的话,下面写东西很清晰很多. @charset 'utf-8'; h ...
- 关于reset.css的疑问:为什么一定要重置浏览器样式?
自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样 ...
- reset.css css重置公共样式
@charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- reset.css(样式重置)
CSS Reset,意为重置默认样式.HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset).举几个例子:1.淘宝(CSS ...
- Reset.css和Normalize.css样式表初始化相关
(1)Reset.css 简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认 ...
- 封装好通用的reset.css base.css 样式重置css文件
一般是叫reset.css 我这边命名成base.css 哎呀无所谓…… @charset "UTF-8"; /*css reset*/ /*清除内外边距*/ body, h1, ...
随机推荐
- Python——flask漏洞探究
python的用途是真的多,就连网站也能做,这个有点像Java的Servlet flask基础 hello world 我们先从基础的开始,在网页上打出hello world,python代码如下: ...
- Math.max.apply()用法
apply的一些其他巧妙用法 Math.max.apply( null, [12,23,34,45] ); //细心的人可能已经察觉到,在我调用apply方法的时候, // 第一个参数是对象(this ...
- 原生js实现扇形导航以及动画的坑
第一次发博客,有点紧张.首先来一张效果图. 主要是实现了点击右下角的风扇按钮实现了: 导航栏的开启与关闭,中间伴随着 transition过渡以及transform的2D动画. 上源码: <!D ...
- AJ学IOS(43)之网易彩票底部自定义TabBar实现切换
AJ分享,必须精品 效果: 代码: NYTabBarController // // NYTabBarController.m // 彩票lottery // // Created by apple ...
- 【selenium】各种exception
selenium中的Exception解释 exception selenium.common.exceptions.ElementClickInterceptedException(msg=None ...
- A Bug's Life POJ - 2492 (种类或带权并查集)
这个题目的写法有很多,用二分图染色也可以写,思路很好想,这里我们用关于并查集的两种写法来做. 题目大意:输入x,y表示x和y交配,然后判断是否有同性恋. 1 带权并查集: 我们可以用边的权值来表示一种 ...
- Eclipse Hadoop源码阅读环境
一.解压hadoop src包到workspace目录.为加快下载jar包的速度,在eclipse的maven设置里将配置文件的路径设置正确,然后配置maven的settings.xml: <m ...
- python成语接龙小游戏
上一篇讲了小游戏的坑现在把源码放出来 #coding:utf-8 import string import pypinyin import sys import random print(" ...
- Spring Data REST不完全指南(三)
上一篇我们介绍了使用Spring Data REST时的一些高级特性,以及使用代码演示了如何使用这些高级的特性.本文将继续讲解前面我们列出来的七个高级特性中的后四个.至此,这些特性能满足我们大部分的接 ...
- 【mybatis xml】数据层框架应用--Mybatis 基于XML映射文件实现数据的CRUD
使用MyBatis框架进行持久层开发 MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架. MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索. MyBa ...