移动端CSS小结

Meta 标签

<meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

移动端页面添加 meta 标签,可以让文档的宽度与设备的宽度保持1:1,文档的最大宽度比例是1.0,不允许用户点击屏幕放大浏览。



 

禁止 iOS 自动识别电话和 Android 自动识别邮箱

<meta name="format-detection" content="telephone=no"/>

<meta name="format-detection" content=“email=no"/>



禁止文本选择

-webkit-user-select:none

屏蔽输入框阴影,去掉按钮默认样式

-webkit-appearance:none

border-box

想要设置一个宽度100%的元素,又要设置元素固定的 padding-left 或 padding-right,还有边框,就会出现水平滚动条,可以用 box-sizing 来解决。

*, *:before, *:after {

-webkit-tap-highlight-color: transparent;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

}



css3 多行文本换行

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

字体不换行,溢出省略号

width:200px;

white-space: nowrap;

text-overflow:ellipsis;

overflow:hidden;



清除浮动影响

.clear:after {

content: ".";

display: block;

height: 0;

visibility: hidden;

clear: both;

}

.clear {

*zoom: 1;

}



表格内容自动换行

table-layout :fixed;

word-break: break-all;

word-wrap :break-word;



iOS 快速回弹

在 iOS 上如果想让一个元素拥有像 Native 的滚动效果,可以这样写:

overflow-y: scroll;

-webkit-overflow-scrolling: touch;



CSS3 元素居中

position: absolute;

top: 50%;

left: 50%;

-ms-transform: translate(-50%,-50%);/*IE9*/

-moz-transform: translate(-50%,-50%);/*Firefox*/

-webkit-transform:translate(-50%,-50%);/*Safari and Chrome*/

-o-transform: translate(-50%,-50%);/*Opera*/

transform: translate(-50%,-50%);

时间: 2024-09-29 08:14:29

移动端CSS小结的相关文章

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } positi

h5端css文本溢出加省略号

单行文本溢出 p{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行文本溢出 p{ width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; } h5端css文本溢出加省略号

移动端CSS Reset

我的移动端CSS Reset,后续会更新. html, body{ width: 100%; margin: 0; padding: 0; } html{ overflow-x: hidden; overflow-y: auto; } ul{ list-style: none; margin: 0; padding: 0; } p{ padding: 0; margin: 0; } a{ text-decoration: none; } 版权声明:本文为博主原创文章,未经博主允许不得转载.

移动端----CSS基础设置

<html> <head> <meta charset="utf-8"> <title>移动端----CSS基础设置</title> <meta name="keyword" content="移动端----CSS基础设置"> <meta name="discription" content="移动端----CSS基础设置">

移动端CSS重置

移动端 CSS Reset 该怎么写 为了应对各大浏览器厂商对浏览器默认样式的不统一处理,我们往往会进行一个 css reset 操作,由于没有标准而且受个人偏好影响,每个公司实现的都不尽相同.在移动端的我们需要关注哪些点呢? 特别针对 IOS 设备的问题 滚动容器的问题 不同浏览器会给同一种标签的元素设置不同的默认样式 下面是我经常使用的一种 css reset 方式: @charset "utf-8"; * { /** * 简单粗暴, 一劳永逸的写法 */ padding: 0;

2015第10周四-CSS小结

这两天做前台页面发现个人在CSS前端方法很多基础知识都忘了,晚上又搜索学习了下,把相关内容摘录总结. CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declaration1; declaration2; ... declarationN } 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样式属性(style attribute).每个属性有一个值.属性和值被冒号分开. selector

移动端 css/html (box-flex)自适应、等比布局

对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title&g

移动端 CSS sprites 的 background-size 如何计算的。

最近践行 移动端实例,第一遇到的问题就是这个.如何找到自己需要的图片位置. 另外我看到说 CSS sprites 比 DataURL 要快很多,不过我看的是13年的一个分析,这好多年过去,不知道最新的如何. 我其实还不知道写图片元素的话 是用 img标签呢 还是用 background 呢? 以下是查阅到的如何计算background-size 的资料.感谢分享. 正常PC设置时: 1 .s1{2     width:22px;height:38px;background-position:-1

CSS小结

一.1. css必须写在<head></head>里面的<style></style>里面 2. css 由选择器 + 规则组成, 规则由属性和值组成 ,格式示例:div{color:red;} 3. 常用的选择器有:标签选择器(类型选择器).class选择器(类选择器).id选择器.后代选择器. 组合选择器和并列选择器等等 4. class选择器与id选择器的区别是,class可以样式重用,而id不行,因为id就像是人的身份证,是唯一的 5.层居中的要决: