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 } @ ...
随机推荐
- 穷竭搜索: POJ 2718 Smallest Difference
题目:http://poj.org/problem?id=2718 题意: 就是输入N组数据,一组数据为,类似 [1 4 5 6 8 9]这样在0~9之间升序输入的数据,然后从这些数据中切一 ...
- srpingboot2 session过期时间设置
springboot2 设置session过期的配置 server.servlet.session.timeout = 1800 而不再是 server.session.timeout=1800
- Android SDK更新失败对策
Fetching https://dl-ssl.google.com/android/repository/addons_list-2.xml Failed to fetch URL https:// ...
- dubbo Filter
官方说明: 调用拦截扩展 扩展说明 服务提供方和服务消费方调用过程拦截,Dubbo 本身的大多功能均基于此扩展点实现,每次远程方法执行,该拦截都会被执行,请注意对性能的影响. 约定: 用户自定义 fi ...
- laravel更新某一个或几个字段
//更新会员状态status $ary_where = array(); $ary_where[] = ['id', '=', $int_id]; $result = $this->obj_ad ...
- POJ 2438 Children’s Dining (哈密顿图模板题之巧妙建反图 )
题目链接 Description Usually children in kindergarten like to quarrel with each other. This situation an ...
- pf
here Pro 排列n个不同的数成为长度为p的序列 每两个相同的数之间至少要隔着m个数 求排列总方案数 Input 三个整数 n,m,p output 输出一个数字表示序列组成方法,由于结果可能很大 ...
- Django-数据库增查
1/ python manage.py shell ---------一般用于调试操作 2/ 建表--定义类 #产品表 class ProductModel(models.Model): #通过类属性 ...
- linux tar 解压出错
今天用tar -xzvf php-7.2.3.tar.gz 解压php的tar包时报错 [root@VM_72_37_centos ~]# tar -xzvf php-.tar.gz gzip: st ...
- bootstrap_bootstrap中日历范围选择插件daterangepicker的使用
1.引入脚本 <link rel="stylesheet" type="text/css" href="assets/css/bootstrap ...