@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进阶(5)_进程与线程之协程、I/O模型

    三.协程 3.1协程概念 协程:又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存 ...

  2. facebook开源了他们的分布式大数据DB

    https://github.com/facebook/presto facebook 3天前开源了他们的 分布式大数据DB Distributed SQL query engine for big ...

  3. 【LeetCode】【动态规划】Edit Distance

    描述 Given two words word1 and word2, find the minimum number of operations required to convert word1  ...

  4. 025_MapReduce样例Hadoop TopKey算法

    1.需求说明

  5. css li 间隙

    如果 li 未浮动,而 li 子元素浮动,则ie6和ie7下会出现间隙,解决办法是给 li 写上css hack      *vertical-align:bottom;

  6. Linux启动ssh服务

    Linux启动ssh服务 在Linux下启动ssh服务使用如下命令其一即可: # service sshd start # /etc/init.d/sshd start 开机启动 使用如下方法其就可以 ...

  7. request模块 一基础部分

    一.HTTP请求   通过requests发送网络请求,方法有get post put delete head options import requests r=requests.get(" ...

  8. CentOS 6.5 下vim 配置

    1. 登录并进入你常用的用户名下,查看其主目录 命令: # su xxx $ cd xxx $ ls -a 2.查看并建立目录和文件 首先看你的主目录~/ 下是否有.vimrc文件,没有就输入指令 $ ...

  9. JMeter学习(九)分布式部署

    Jmeter 是java 应用,对于CPU和内存的消耗比较大,因此,当需要模拟数以千计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心,甚至会引起JAVA内存溢出错误.为了让jmeter工具 ...

  10. 【P2361】yyy棋(博弈论+贪心+模拟)

    这个题看上去本来不好处理,然而善意的题面已经基本告诉你做法了,小时候玩的那个游戏就是代码的核心.动动脑子想想,如果长和宽的积是奇数,那么一定要先手,如果是偶数,那么后手就会获胜. 好了,那么怎么处理对 ...