@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. MapInfo 文件格式说明

    MapInfo 文件格式说明(id.map.tab.dat) (1). 属性数据的表结构文件.TAB 属性数据表结构文件定义了地图属性数据的表结构,包括字段数.字段名称.字段类型和字段宽度.索引字段及 ...

  2. 字典树 trie树 学习

    一字典树 字典树,又称单词查找树,Trie树,是一种树形结构,哈希表的一个变种   二.性质 根节点不包含字符,除根节点以外的每一个节点都只包含一个字符: 从根节点到某一节点,路径上经过的字符串连接起 ...

  3. iOS 给 ViewController 减负 之 UITableView

    今天看了一些博客文章分享了如何给ViewController 瘦身的问题, 其中一个就是tableView. 的确,随着产品迭代,VC里面可能越来越臃肿,有时候真的需要好好进行一次瘦身.可能是参考的博 ...

  4. Python学习进程(13)文件与IO

        本节介绍基本的IO函数和文件的读写操作.     (1)读取键盘输入: Python用于读取键盘输入的函数有两个:raw_input与input. 1)raw_input函数 从标准输入读取一 ...

  5. jsp导出

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. /usr/lib/update-notifier/updates-available

     /usrb/update-notifier/update-motd-updates-available: 49: /usrb/update-notifier/update-motd-updates- ...

  7. gstreamer交叉编译

    gstreamer(0.10.36) ./configure --build=i686-linux --host=arm-linux --prefix=/opt/EmbedSky/gcc-4.6.2- ...

  8. Python编程-常用模块及方法

    常用模块介绍 一.time模块 在Python中,通常有这几种方式来表示时间: 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行 ...

  9. debian内核代码执行流程(一)

    本文根据debian开机信息来查看内核源代码. 系统使用<debian下配置dynamic printk以及重新编译内核>中内核源码来查看执行流程. 使用dmesg命令,得到下面的开机信息 ...

  10. OC_id类型

     博客正式开通啦!以后会每天为大家更新知识,将过去学习的笔记发布出来.供大家学习交流. 在Objective-C 中,id 类型是一个独特的数据类型.在概念上,类似Java 的Object 类,可以转 ...