@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 ...
随机推荐
- C#对excel的操作
本文先描述如何用c#连接.操作excel文件. 项目中需要引入的DLL文件为Interop.Excel.Interop.Microsoft.Office.Core.Interop.Office等. 操 ...
- Django为什么要跳转到不同的页面来实现不同的功能
其实是不同将信息提交给不同的页面交给不同的页面去处理同一个数据库,不同的模块实现不同的功能,当要实现某一个功能的时候直接跳转到那一个功能下面的url,可以把要实现的功能区分开,以python面向对象的 ...
- c# 抽象类(abstract)
using System; using System.Collections.Generic; using System.Linq; using System.Text; //抽象类(abstract ...
- Linux Shell基础 多个命令中的分号(;)、与(&&) 、 或(||)
概述 在 Bash 中,如果需要让多条命令按顺序执行,则有这样方法,如表 1 所示. 多命令执行符 格 式 作 用 : 命令1 ; 命令2 多条命令顺序执行,命令之间没有任何逻辑关系 &&am ...
- Swing 添加超链接 打开页面
http://lazycat774880994.iteye.com/blog/567412 Swing中打开一个连接或者web页面的一些记录,这几种方式是在项目中有这样子用到过,特来记录一下,以便下 ...
- 苹果终端wifi图标点亮慢和portal弹窗机制分析以及处理办法和建议
转:http://kms.h3c.com/View.aspx?id=52875 问题现象 在无线环境中经常碰到苹果终端连接无线后wifi图标无法点亮导致终端无法上网.在起portal的网络中认证页面无 ...
- PHP用*隐藏中文问题
中文截取 function substr_cut($user_name){ $strlen= mb_strlen($user_name, 'utf-8'); $firstStr= mb_substr( ...
- Service Meth and SideCar
本文转自:http://philcalcado.com/2017/08/03/pattern_service_mesh.html SideCar: SideCar就是与Application一起运行的 ...
- mongodb GridFS django FileFiled 默认 widget 只有一个文件上传框显示不了字段内容,重写widget
首先,定位到:FileFiled 默认 widget 源码:mongoadmin包options.py中,如下: # Defaults for formfield_overrides. ModelAd ...
- 使用命令【TLCL】
type command 显示命令的类别 which command 显示可执行程序的位置 help - 得到 shell 内建命令的帮助文档 --help - 显示用法信息 man ...