@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页面自适应尺寸!!的更多相关文章

  1. 解决@media screen (自适应)IE浏览器不兼容问题

    1.解决兼容性问题 (1)页面最顶部必须定义:<!DOCTYPE html> (2)点击:下载 respond.js 文件 (3)引入<script src="respon ...

  2. 使用CSS3 @media 设置页面自适应

    参考CSS3 @media 查询 如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { bo ...

  3. 手机端@media screen布局自适应

    @media only screen and (min-width: 310px) and (max-width: 360px) { }@media only screen and (min-widt ...

  4. @media screen媒体查询实现页面自适应布局

    @media screen and (min-width:1200px){ //大于等于1200px才会进入 }   @media screen and (max-width:375px) { //小 ...

  5. [转载]利用@media screen实现网页布局的自适应,@media screen and

    开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...

  6. 利用@media screen实现网页布局的自适应,@media screen and

    开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...

  7. html自适应布局,@media screen,媒体查询

    html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta chars ...

  8. 利用@media screen实现网页布局的自适应

    利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

  9. 实现网页布局的自适应 利用@media screen

    利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-widt ...

随机推荐

  1. Python函数之—— 装饰器(Day13)

    一.什么是装饰器 顾名思义,装饰器指为其他函数添加新功能 装饰器定义:本质就是函数,功能是为其他函数添加新功能 二.装饰器需要遵循的原则 1.不修改被装饰函数的源代码(开放封闭原则) 2.为被装饰函数 ...

  2. PAT 天梯赛 L1-030. 一帮一 【STL】

    题目链接 https://www.patest.cn/contests/gplt/L1-030 思路 用三个 Vector 来分别存放 整个排名,以及男生的单独排名和女生的单独排名 从整个的排名 从上 ...

  3. UI控件之UITableView的协议方法

    <UITableViewDataSource,UITableViewDelegate> //设置表视图的编辑状态 -(void)setEditing:(BOOL)editing anima ...

  4. 转:APDU命令格式

    CLA    INS  P1  P2  Lc  Data  Le 其中CLA为指令类别:INS为指令码:P1.P2为参数:Lc为Data的长度:Le为希望响应时回答的数据字节数,0表最大可能长度. 一 ...

  5. json教程系列(1)-使用json所要用到的jar包下载

    json是个非常重要的数据结构,在web开发中应用十分广泛.我觉得每个人都应该好好的去研究一下json的底层实现,基于这样的认识,金丝燕网推出了一个关于json的系列教程,分析一下json的相关内容, ...

  6. linux中安装软件的集中方法

    一.rpm包安装方式步骤: 引用:1.找到相应的软件包,比如soft.version.rpm,下载到本机某个目录:2.打开一个终端,su -成root用户:3.cd soft.version.rpm所 ...

  7. 自己动手编译Android源码(超详细)

    http://www.jianshu.com/p/367f0886e62b 在Android Studio代码调试一文中,简单的介绍了代码调试的一些技巧.现在我们来谈谈android源码编译的一些事. ...

  8. python中偏函数

    当一个函数有很多参数时,调用者就需要提供多个参数.如果减少参数个数,就可以简化调用者的负担. 比如,int()函数可以把字符串转换为整数,当仅传入字符串时,int()函数默认按十进制转换: >& ...

  9. jQuery仿苹果样式焦点图插件

    在线演示 本地下载

  10. 优美的英文诗歌Beautiful English Poetry

    <When you are old>——<当你老了> --- William Butler Yeats ——威廉·巴特勒·叶芝When you are old and grey ...