@media screen页面自适应尺寸!!
@media screen and (max-width:360px){body,input,select{font-size:38%}}
@media screen and (min-width:360px){body,input,select{font-size:15.75px}}
@media screen and (min-width:400px){body,input,select{font-size:17.5px}}
@media screen and (min-width:480px){body,input,select{font-size:21px}}
@media screen and (min-width:560px){body,input,select{font-size:24.5px}}
@media screen and (min-width:600px){body,input,select{font-size:26.25px}}
@media screen and (min-width:640px){body,input,select{font-size:62.5%}}
HTML头部引用实现自适应屏幕:
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0, user-scalable=no" />
CSS头部引用实现判断屏幕自适应:
最终更新后(推荐):
body{font-family:"微软雅黑";color:#000;font-size:62.5%;margin:0 auto; }
@media screen and (min-width:480px) and (max-width:639px){body{font-size:50%;}}
@media screen and (max-width:479px){body{font-size:40%;}}
一下个人理解:
max-width{宽度的最大值==小于当前宽度}
min-width{宽度的最小值==大于当前宽度}
@media screen页面自适应尺寸!!的更多相关文章
- 解决@media screen (自适应)IE浏览器不兼容问题
1.解决兼容性问题 (1)页面最顶部必须定义:<!DOCTYPE html> (2)点击:下载 respond.js 文件 (3)引入<script src="respon ...
- 使用CSS3 @media 设置页面自适应
参考CSS3 @media 查询 如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { bo ...
- 手机端@media screen布局自适应
@media only screen and (min-width: 310px) and (max-width: 360px) { }@media only screen and (min-widt ...
- @media screen媒体查询实现页面自适应布局
@media screen and (min-width:1200px){ //大于等于1200px才会进入 } @media screen and (max-width:375px) { //小 ...
- [转载]利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- 利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- html自适应布局,@media screen,媒体查询
html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta chars ...
- 利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...
- 实现网页布局的自适应 利用@media screen
利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-widt ...
随机推荐
- Python函数之—— 装饰器(Day13)
一.什么是装饰器 顾名思义,装饰器指为其他函数添加新功能 装饰器定义:本质就是函数,功能是为其他函数添加新功能 二.装饰器需要遵循的原则 1.不修改被装饰函数的源代码(开放封闭原则) 2.为被装饰函数 ...
- PAT 天梯赛 L1-030. 一帮一 【STL】
题目链接 https://www.patest.cn/contests/gplt/L1-030 思路 用三个 Vector 来分别存放 整个排名,以及男生的单独排名和女生的单独排名 从整个的排名 从上 ...
- UI控件之UITableView的协议方法
<UITableViewDataSource,UITableViewDelegate> //设置表视图的编辑状态 -(void)setEditing:(BOOL)editing anima ...
- 转:APDU命令格式
CLA INS P1 P2 Lc Data Le 其中CLA为指令类别:INS为指令码:P1.P2为参数:Lc为Data的长度:Le为希望响应时回答的数据字节数,0表最大可能长度. 一 ...
- json教程系列(1)-使用json所要用到的jar包下载
json是个非常重要的数据结构,在web开发中应用十分广泛.我觉得每个人都应该好好的去研究一下json的底层实现,基于这样的认识,金丝燕网推出了一个关于json的系列教程,分析一下json的相关内容, ...
- linux中安装软件的集中方法
一.rpm包安装方式步骤: 引用:1.找到相应的软件包,比如soft.version.rpm,下载到本机某个目录:2.打开一个终端,su -成root用户:3.cd soft.version.rpm所 ...
- 自己动手编译Android源码(超详细)
http://www.jianshu.com/p/367f0886e62b 在Android Studio代码调试一文中,简单的介绍了代码调试的一些技巧.现在我们来谈谈android源码编译的一些事. ...
- python中偏函数
当一个函数有很多参数时,调用者就需要提供多个参数.如果减少参数个数,就可以简化调用者的负担. 比如,int()函数可以把字符串转换为整数,当仅传入字符串时,int()函数默认按十进制转换: >& ...
- jQuery仿苹果样式焦点图插件
在线演示 本地下载
- 优美的英文诗歌Beautiful English Poetry
<When you are old>——<当你老了> --- William Butler Yeats ——威廉·巴特勒·叶芝When you are old and grey ...