文档章节

页面适配

墨鱼拉面
 墨鱼拉面
发布于 2016/11/01 08:26
字数 110
阅读 3
收藏 0

一:字体适配

        body {

        /**

        *  根据媒体查询不同页面大小给出不同字体大小  12px

        */

        页面中所有元素 都用 rem

}

二:媒体查询

横屏

@media screen and (max-width: 300px) and (min-width: 300px) and  (orientation : landscape) {
    html{
        background-color:lightblue;
    }
}

竖屏

@media screen and (max-width: 300px) and (min-width: 300px) and  (orientation : portrait) {
    html{
        background-color:lightblue;
    }
}

三:页面控制

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

html{

    height:100%

}

body{

    margin:0;padding:0;

}

其他元素都用 百分比

© 著作权归作者所有

上一篇: 常用echart 套路
下一篇: linux下常用命令
墨鱼拉面
粉丝 0
博文 17
码字总数 1757
作品 0
深圳
程序员
私信 提问
使用Flexible实现手淘H5页面的终端适配

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

问题达人
2016/03/29
70
0
今日头条屏幕适配方案终极版正式发布!

原文地址: https://www.jianshu.com/p/4aa23d69d481 以下是 骚年你的屏幕适配方式该升级了! 系列文章,欢迎转发以及分享: 骚年你的屏幕适配方式该升级了!(一)-今日头条适配方案 骚年你的屏...

JessYan
2018/10/23
0
0
使用Flexible实现手淘H5页面的终端适配 #17

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

GIFCOOL
2016/09/22
108
0
rem 以屏幕宽度做适配的时候出现的疑问

当我们以屏幕宽度做适配的时候,页面基于屏幕的宽度适配屏幕,在适配字体的时候就会问题,字体的高度相对于屏幕过高(使用rem为单位时)。 我们都知道 字体是以正方形出现在页面上的,设置字...

小鸟00
2018/08/27
119
2
React Native 组件之SafeAreaView

SafeAreaView简介 ReactNative官方从0.50.1版本开始,加入了针对iPhone X设备齐刘海页面适配的组件SafeAreaView,为ReactNative开发APP时对iPhone X的页面适配提供了很大的方便。目前,SafeA...

大灰狼的小绵羊哥哥
2018/09/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

实战项目-学成在线(一)

之前看的黑马程序员实战项目之一,打算以博客的形式写出来,也让自己重新温习一下。 1、项目背景 略(就是当前这东西很火,我们重点在开发,这些就略过) 2、功能模块 门户,学习中心,教学管...

lianbang_W
27分钟前
2
0
基于Vue的数字输入框组件开发

本文转载于:专业的前端网站➫基于Vue的数字输入框组件开发 1、概述 Vue组件开发的API:props、events和slots 2、组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果:...

前端老手
36分钟前
2
0
百度地图根据经纬度获取运动轨迹

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=n......

泉天下
37分钟前
4
0
学习记录(day04-axios增删改查、v-for循环、页面加载成功处理函数)

[TOC] 1.1 基本语法:插值表达式 <template> <div> {{username}} <br/> {{1+2+3}} <br/> {{'你的名字是:' + username}} <br/> {{'abc'.split('')}} </div><......

庭前云落
今天
3
0
CentOS Linux 7上将ISO映像文件写成可启动U盘

如今,电脑基本上都支持U盘启动,所以,可以将ISO文件写到U盘上,用来启动并安装操作系统。 我想将一个CentOS Linux 7的ISO映像文件写到U盘上,在CentOS Linux 7操作系统上,执行如下命令: ...

大别阿郎
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部