*{
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的更多相关文章

  1. 移动页面HTML5自适应手机屏幕宽度

    标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...

  2. Unity3d 手机屏幕自动适配

    我提到手机自动适配的一个方法中:postion和Scale,“比例”概念适配手机.原始资源是480*800 经过实际项目考验,个人感觉: 1,UICamera是自动适配分辨率,UI上也是拉伸.放大UI ...

  3. CSS3自适配手机屏幕[转]

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. CSS3自适配手机屏幕

    @media only screen and (max-width:350px){ .img{ width: 80px; height:70px; background-image: url(./im ...

  5. HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

  6. 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  7. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  8. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  9. web app变革之rem(手机屏幕实现全适配)

    以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...

随机推荐

  1. Jenkins配置定时任务

    在任务配置中,滚动到构建触发器-->勾选"Build periodically"-->在输入框中配置触发时间 以上配置,表示在6月13日23点触发. 如果配置成  00 ...

  2. spark科普

    普Spark,Spark是什么,如何使用Spark(1)转自:http://www.aboutyun.com/thread-6849-1-1.html 阅读本文章可以带着下面问题:1.Spark基于什 ...

  3. Linux下编译Phantomjs

    1.安装依赖的库 <pre> sudo apt-get install g++ flex bison gperf ruby perl \ libsqlite3-dev libfontcon ...

  4. soj1762.排座椅

    1762. 排座椅 Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description 上课的时候总有一些同学和前后左右的人交头接耳,这是令 ...

  5. <转>Android APP字体大小,不随系统的字体大小变化而变化的方法

    从android4.0起系统设置的”显示“提供设置字体大小的选项.这个设置直接会影响到所有sp为单位的字体适配,所以很多app在设置了系统字体后瞬间变得面目全非.下面是解决方案 Resources r ...

  6. ubuntu 开机自动挂在windows下的分区

    最近装了Ubuntu14.04 + windows7 的双系统,启动Ubuntu的时候,不会自动挂载win7的分区,只有我点击相应的硬盘符号时才会挂载/media下面.本着折腾到底的原则,在网上搜了搜 ...

  7. Centos7网络配置(VMware)

    在VM虚拟机上装了Centos7,想要用xshell5连接操作,配置网络花了整整一个上午的时间,真是心酸. 登陆后,使用命令 ip addr查看了本机的网络 可以看到我的网络配置文件是ens33, 使 ...

  8. Linux的基础优化-2

    1.启动网卡 ifup eth0 2.SSH链接 ifconfig 查看IP后SSH终端连接3.更新源 最小化安装是没有wget工具的,必须先安装再修改源 yum install wget 备份原系统 ...

  9. input 输入框 propertychange

    做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件    触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...

  10. haproxy代理https配置方法【转】

    记得在之前的一篇文章中介绍了nginx反向代理https的方法,今天这里介绍下haproxy代理https的方法: haproxy代理https有两种方式:1)haproxy服务器本身提供ssl证书, ...