@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. MySQL数据库(6)_用户操作与权限管理、视图、存储过程、触发器、基本函数

    用户操作与权限管理 MySQL用户操作 创建用户 方法一: CREATE USER语句创建 CREATE USER "用户名"@"IP地址" IDENTIFIE ...

  2. 解决远程桌面关闭后teamviewer不能连接的问题

    使用windows远程桌面连接远程电脑,在关闭远程桌面后,windows系统会锁定,此时再用teamviewer连接会出现“无法捕捉画面”或者“拒绝连接”的问题. 解决办法:设置要连接的远程电脑上的t ...

  3. C#中往数据库插入空值报错解决方法

    C#中的NUll于SQL中的null是不一样的, SQL中的null用C#表示出来就是DBNull.Value 在用C#往数据库里面插入记录的时候, 可能有的字段你不赋值,那么这个字段的值就为null ...

  4. kafka connect简介以及部署

    https://blog.csdn.net/u011687037/article/details/57411790 1.什么是kafka connect? 根据官方介绍,Kafka Connect是一 ...

  5. 用matlab将nc数据读出来,写成二进制文件,然后用grads画图

    clear,clc nt=735;ny=73;    %2.5*2.5格点的nx=144;    %2.5*2.5格点的f=netcdf('air.mon.mean.nc','nowrite');tt ...

  6. JavaScript笔记02——基本语法(包括函数、对象、数组等)

    Doing Math & Logic Conditional & Looping Functions Objects Arrays Doing Math & Logic 1.J ...

  7. Hearbeat + Nginx 安装配置

    Hearbeat + Nginx 安装配置 实验环境 两台主机:Linux Centos 6.5 32位 主 服务端:Hearbeat + Nginx eth0:192.168.1.160(公网) e ...

  8. 20165101刘天野 2017-2018-2 《Java程序设计》第3周学习总结

    20165101刘天野 2017-2018-2 <Java程序设计>第3周学习总结 编程语言的几个发展阶段 类 构造方法与对象的创建 类与程序的基本结构 参数传值 对象的组合 实例成员与类 ...

  9. OC_内存管理

      引言:      1.OC中的对象都是分配在堆中的                声明对象的格式:                     Person *person = [Person new ...

  10. SQL Server 利用WITH AS递归获取层级关系数据

    WITH AS短语,也叫做子查询部分(subquery factoring),在SQL Server 2005中提供了一种解决方案,这就是公用表表达式(CTE),使用CTE,可以使SQL语句的可维护性 ...