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 } @ ...
随机推荐
- CF&&CC百套计划3 Codeforces Round #204 (Div. 1) D. Jeff and Removing Periods
http://codeforces.com/problemset/problem/351/D 题意: n个数的一个序列,m个操作 给出操作区间[l,r], 首先可以删除下标为等差数列且数值相等的一些数 ...
- 二、Kafka基础实战:消费者和生产者实例
一.Kafka消费者编程模型 1.分区消费模型 分区消费伪代码描述 main() 获取分区的size for index =0 to size create thread(or process) co ...
- laravel带条件查询手动分页
后台php代码: //手动分页 $users = $kaoqin; //打算输出的数组,二维 $perPage = 10; if ($request->has('page')) { $curre ...
- HDU 2722 Here We Go(relians) Again (最短路)
题目链接 Problem Description The Gorelians are a warlike race that travel the universe conquering new wo ...
- mysql 时间戳
需求:记录表中每条记录创建时间和最新修改时间 一.界面操作 工具:mysql-front 右键添加字段createTime和updateTime,字段类型为timestamp 完成,在表中添加一条新纪 ...
- Oracle DataTable的数据批量写入数据库
insert语句,sqldataadapter.update(dataset,tablename);sqlbulkcopy.WriteToServer(datatable);三个方法的性能进行比较: ...
- vue开发者工具vue-devtools-4.1.4_0.crx谷歌插件下载及安装
网盘地址: https://pan.baidu.com/s/14PoaihUHQZEJtiHNWUmdjg 下载好后 谷歌浏览器中扩展程序,开启开发者模式,将下载的文件拖到窗口中即可 然后重启浏览器 ...
- linux===sar命令性能监控
sar介绍: sar是System Activity Reporter(系统活动情况报告)的缩写.sar工具将对系统当前的状态进行取样,然后通过计算数据和比例来表达系统的当前运行状态.它的特点是可以连 ...
- shell服务管理->
nginx.php等服务管理练习脚本 ->nginx的启动状态 root@jumpserver- day02]# cat nginx_web.sh #!/bin/bash source /etc ...
- MySQL 联合查询
联合查询:将多次查询(多条select语句), 在记录上进行拼接(字段不会增加) 基本语法:多条select语句构成: 每一条select语句获取的字段数必须严格一致(但是字段类型无关) 语法 Sel ...