html5+css3 手机屏幕的适配css
*{
margin:0;padding:0;outline:0
}
a{
text-decoration:none
}
body,html{
font-size:20px;font-family:'Microsoft YaHei,微软雅黑';height:100%;
}
-webkit-input-placeholder{
color:#ccc
}
::-moz-placeholder{
color:#ccc
}
:-ms-input-placeholder{
color:#ccc
}
input:-moz-placeholder{
color:#ccc
}
html{
font-size:20px;height:100%
}
@media only screen and (min-width:320px) and (min-height:480px){
html{
font-size:20px!important
}
}
@media only screen and (min-width:320px) and (min-height:568px){
html{
font-size:20px!important
}
}
@media only screen and (min-width:360px) and (min-height:640px){
html{
font-size:22.5px!important
}
}
@media only screen and (min-width:375px) and (min-height:667px){
html{
font-size:23.5px!important
}
}
@media only screen and (min-width:414px) and (min-height:736px){
html{
font-size:25.9px!important
}
}
@media only screen and (min-width:736px){
html{
font-size:46px!important
}
}
html5+css3 手机屏幕的适配css的更多相关文章
- 移动页面HTML5自适应手机屏幕宽度
标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...
- Unity3d 手机屏幕自动适配
我提到手机自动适配的一个方法中:postion和Scale,“比例”概念适配手机.原始资源是480*800 经过实际项目考验,个人感觉: 1,UICamera是自动适配分辨率,UI上也是拉伸.放大UI ...
- CSS3自适配手机屏幕[转]
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS3自适配手机屏幕
@media only screen and (max-width:350px){ .img{ width: 80px; height:70px; background-image: url(./im ...
- HTML5+CSS3的响应式网页设计:自动适应屏幕宽度
这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...
- 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
- 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码
1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...
- 了解真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- web app变革之rem(手机屏幕实现全适配)
以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...
随机推荐
- .NET 定时器类及使用方法
Timer类实现定时任务 //2秒后开启该线程,然后每隔4s调用一次 System.Threading.Timer timer = new System.Threading.Timer((n) =&g ...
- 推荐一些我所用的firefox 附加组件。
firefox之所以强大,很大程度上是因为它有着超多的扩展组件,来实现许多有趣的功能.这几天把我装的firefox附加组件整理下,个人认为是一般上网常用或者可以说是必备的组件,o(∩_∩)o ,晒晒. ...
- ubuntu 开机自动挂在windows下的分区
最近装了Ubuntu14.04 + windows7 的双系统,启动Ubuntu的时候,不会自动挂载win7的分区,只有我点击相应的硬盘符号时才会挂载/media下面.本着折腾到底的原则,在网上搜了搜 ...
- python加速包numba并行计算多线程
1.下面直接上代码需要注意的地方numba的官网找到 1)有一些坑自己去numba的官网找找看,下面是我的写的一个加速的程序,希望对你有帮助. #coding:utf-8 import time fr ...
- python读写mysql
读取mysql数据 # -*- coding: utf-8 -*- # 导入必要模块 import pandas as pd from sqlalchemy import create_engine ...
- Django rest framwork
Restful API REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角度类 ...
- 关于禁用"请停用以开发者模式运行的扩展程序"提示
有兴趣研究谷歌浏览器扩展开发,但每次开启高版本chrome都会有烦人的提示 因为我用的360急速,目前还有提示,但使用原生chrome连插件都给删了,无语
- Rico Board.1.环境配置
1.搭建开发环境 1.解压文件 sudo tar -jvxf gcc-linaro-arm-linux-gnueabihf-4.7-2013.03-20130313_liunx.tar.bz2 -C ...
- Linux环境下如何查看内存CPU和GPU使用情况以及界面标题栏实现
查看内存和CPU 单独查看内存使用情况的命令:free -m 查看内存及cpu使用情况的命令:top 也可以安装htop工具,这样更直观, 安装命令如下:sudo apt-ge ...
- C++ Primer 5th 第19章 特殊工具与技术
C++是一种通用型语言,其设计者希望它能处理各种各样的问题,因此除了一些能适用于所有问题的语言特性,还有一些适用于特定问题的特性. 控制内存分配 某些程序对内存分配有着特殊的需求,它们不适合使用标准的 ...