css 移动端填充高度

CSS实现div填充剩余高度

相信小伙伴们经常会遇到这个问题,我也是填了很多坑,查了很多资料,才解决的,下面我列出2个方法: 我们的需求如图: 1:(这个方法不推荐使用,因为可能会因为设备不同,而出现未知BUG,特别是div出现padding的时候) <div class="main"> <div class="title"></div> <div class="content"></div> </div>

解决CSS移动端1px边框问题

移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解决1px边框问题</title> <meta name="viewport"

1.解决移动端触摸a元素,会有蓝色阴影正常状态: 点击时状态: a{ outline:none; -webkit-tap-highlight-color: rgba(,,,); } -webkit-tap-highlight-color: rgba(0,0,0,0);可以将该阴影透明化 2.对于多个图片之间会有小间隙 .imgs-box{ img{ display: block; width: %; } } 声明: 请尊重博客园原创精神,转载或使用图片请注明: 博主:xing.org1^ 出处

css 移动端图片等比显示处理

第一次写博文,心情有点小小的激动~~~~~ 刚开始做移动端项目的时候遇到了一些优化的问题,比如,打开网页在2g或者3g的情况下加载网页,刚开始渲染的时候,遇到图片文件未请求,图片的高度会为0,当然,如果你给定图片的高度的时候就不会有这样的情况,这样会出现渲染过程不平缓的情况. 类似这样. 之后查询了网上的一些相关资料,发现用rem可以实现宽度等比,但是项目已经基本完成,所以这个办法也是走不通了...@@ 最后用乐另外一种 <div class="headimg"> <

css移动端:acitve效果的实现

做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有“鼠标指针浮动在其上的元素”的情况,有也很少. 所以取代的应该:active这个选择器,但是通过实践,发现情况不是很理想,在QQ浏览器上有时触发,有没不触发,在我mx3带自浏览器上根本没效果. 最近在看美团h5的页面时发现他们做对这个效果做得很好(这里说实话,美团网在h5这一块做得真好),看了他们代码

css 移动端1px更细

1.最近写项目经常遇到4个入口菜单放在一行,然后加border:1px 在移动端显示却很粗,如下图: <div class="header"> <div class="div-block color1"> 1 </div> <div class="div-block color2"> 2 </div> <div class="div-block color3"&

CSS移动端多行显示多余省略号

/*css3 多行显示省略号,也可用于单行*/ .one-line { display: -webkit-box; overflow : hidden; text-overflow: ellipsis; -webkit-line-clamp:; -webkit-box-orient: vertical; }

CSS - 移动端常见小bug整理与解决方法总结【更新中】

常见问题总结与整理系列~ 1. border一像素在手机上看着有点粗的问题: 原理是因为:1px在手机上是使用2dp进行渲染的.换成 border: 0.5像素?是不行的! 解决方法: 把border给了元素的before或者after等伪类,然后让伪类利用css3的transform的scaleY(0.5)缩放0.5像素,这样,就能实现了. ps:小程序里的button的border也是这种方法解决得. <!doctype html> <html lang="en"

css 移动端页面，在ios中，margin-bottom 没有生效

在开发中,你会遇到各种美轮美奂的UI交互设计图,下面这种UI图,我在开发时就在布局上遇到一个小问题问题现象:ios 手机滚动到底部,底部的margin-bottom不生效,Android手机和模拟器都是正常的,虽然不是什么大bug,但是,有问题就要解决问题图片展示正常图片展示经过对比没有问题的页面,找到了原因,测试来测试去,一条不符合效果就不对, html, body { height: 100%; background: #ec4349; } // 外部包裹的元素 overflow:

css移动端适配 1px边框的解决方案

.border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是1px @media screen and (-webkit-min-device-pixel-ratio:2) { .border::after{ content: ''; position: absolute; left: 0; top: 0; border: 1px solid #000; b

(原)前端知识杂烩（css系列）

更新于 20160217 1. css hack .pad{ padding:17px 0 0 17px; /* 普通写法 */ *padding:17px 0 0 17px; /* *为IE7 *+html css()为IE7 */ _padding:17px 0 0 17px; /* _为IE6 *html css()为IE6 */ } 2. css 设置圆角 .radius{ -moz-border-radius: 100px; -webkit-border-radius: 100px;

在React中使用CSS Modules设置样式

最近,一直在看React...那真的是一个一直在学的过程啊,从配置环境webpack,到基础知识jsx,babel,es6,没有一个不是之前没有接触的.其实,我内心是兴奋的啊,毕竟,活着就是要接触一些新的东西啊,那样才有意思啊. 反正多学点,肯定是没错的.哈哈...进入正题啦我一看到CSS Modules这个词我就懵了,毕竟在我印象中,CSS高端一点的就是用SASS,LESS定义变量啊,写个嵌套什么的,Modules是什么鬼啊.学新东西都是这样,一开始,好奇在拒绝,坚持看下去,大概就明白了.

css之自定义滚动条

<div class="alertbox index-rulebox" style="display:none"> <div class="index-alert-rule"> <div class="rule-con"> <p>()每天10:.:.:.:00整点开抢:</p> <p>()每次180份,限量限时抢购,抢完即止:</p> <

用原生JS写一个网页版的2048小游戏（兼容移动端）

这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online-game/ github地址:https://github.com/Yuan-Yiming/2048-online-game ==================================================================== 下面简单分析一下JS代码: 1.游

移动端web开发初探之Vuejs的简单实战

这段时间在做的东西,是北邮人论坛APP的注册页.这个注册页是内嵌的网页,因为打算安卓和IOS平台同时使用.因此实际上就是在做移动端的web开发了. 在这过程中遇到了不少有意思的东西. DEMO的github地址在这里内容提要: meta标签 Vuejs的简单实战 CSS移动端全屏背景 CSS移动端动画初探 meta标签这点与在PC端写前端有着很大的区别,移动端的meta标签简直多.我就说说我所用到的标签. <!-- 1.如果支持Google Chrome Frame:GCF,则使用GCF渲染

【vue移动端架子】vue-h5-template

作者大大的地址:https://github.com/sunnie1992/vue-h5-template 我们运行项目,倒是可以看一看效果虽然就是显示的UI,但是应该可以知道作者大大想要什么东西了移动端,应该比较重点的是适配了,所以重点看一下适配还有作者大大没有用gulp或者webpack,我自己觉得这个小demo应该有优化架构空间看了一下main.js //main.js import Vue from 'vue' import 'normalize.css/normalize.cs

Less和Sass编译

使用koala编译 Koala 是一款由国人开发的开源预处理语言图形编译工具,目前已支持 Less.Sass.Compass 与CoffeeScript. 目前支持以下系统:Windows,Mac, 10.7+,Linux: 32bit / 64bit,Ubuntu: 32bit / 64bit: 我们可以从他们官方网站下载 koala:点击进入,使用文档点击进入使用方法: 安装完成后打开 Koala,把文件夹拖入界面或者是在左侧加号处选择文件夹,此时在界面左边有文件夹路径产生. 同时有 le

ApiCloud开发的注意事项

1. 引擎或模块问题:遇到应用层无法解决的问题,如果能确定需要引擎和模块支持的,不要自己想办法绕过去,要第一时间在开发者社区提交问题,或找APICloud项目经理提出. !!!注意!!!: 在开发者社区中,会有版主和APICloud技术支持对您的问题进行验证和解答. !!!注意!!!: 定制平台项目问题提出后2天之内没有解决的,可以直接找APICloud项目总监投诉. 2. 开发工具:推荐使用Sublime Text+APICloud插件,调试工具使用自定义Loader,真机同步使用WiFi真机

最全的Django入门及常用配置

Django 常用配置 Django 安装 pipx install django x 为python解释器版本2 or 3 如果你想安装指定版本的django,使用pip install django=1.11.8 python manage.py 不加任何其他参数时,返回命令列表,类似help 项目创建一个Django项目终端输入 django-admin startproject 项目名称 # 初始文件结构 mysite | |--mysite | | | |--__init__.

ant Design和ant Design mobile的使用，并实现按需加载

1.全局安装yarn npm install -g create-react-app yarn 2.创建react项目,并用yarn start 运行 3.引入antd/引入antd-mobile yarn add antd yarn add antd-mobile 4.在app.js引入button pc端 import Button from 'antd/lib/button'; <div className="App"> <Button type="p

ApiCloud开发经验总结

1. 引擎或模块问题:遇到应用层无法解决的问题,如果能确定需要引擎和模块支持的,不要自己想办法绕过去,要第一时间在开发者社区提交问题,或找APICloud项目经理提出. !!!注意!!!: 在开发者社区中,会有版主和APICloud技术支持对您的问题进行验证和解答. !!!注意!!!: 定制平台项目问题提出后2天之内没有解决的,可以直接找APICloud项目总监投诉. 2. 开发工具:推荐使用Sublime Text+APICloud插件,调试工具使用自定义Loader,真机同步使用WiFi