手机端网页开发的两个重要设置
一、media
以@开头的CSS语法称为查询,CSS3引入了@media查询。CSS其实就是通过选择器决定何时启用一些属性配置。这种思想不仅仅可以用在界面上,也可以用在工程设计上。例如有许多种操作,命中不同规则时启用不同的操作;有许多种配置,在不同环境下启用不同的配置。@media就是用来在不同界面环境下启用不同的配置。
先举个例子:当屏幕宽度小于300像素时,背景色为浅蓝色。
@media screen and (max-width: 300px) {body {background-color:lightblue;}
}
使用 @media 查询,可以针对不同的媒体类型定义不同的样式。其中媒体类型包括:打印机、屏幕设备、语音设备三种。我们只需要关注屏幕设备即可。
@media 可以针对不同的屏幕尺寸设置不同的样式。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
media基本语法
CSS 语法
@media mediatype and|not|only (media feature) {CSS-Code;
}
你也可以针对不同的媒体使用不同 stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
media支持的设备
media支持的设备类型现在有效的只有三种,其它的都已经废弃了。
- all 用于所有设备
- aural 已废弃。用于语音和声音合成器
- braille 已废弃。 应用于盲文触摸式反馈设备
- embossed 已废弃。 用于打印的盲人印刷设备
- handheld 已废弃。 用于掌上设备或更小的装置,如PDA和小型电话
- print 用于打印机和打印预览
- projection 已废弃。 用于投影设备
- screen 用于电脑屏幕,平板电脑,智能手机等。
- speech 应用于屏幕阅读器等发声设备
- tty 已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备
- tv 已废弃。 用于电视和网络电视
media支持的设备详情
颜色相关
- color 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
- color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
- max-color 定义输出设备每一组彩色原件的最大个数。
- min-color 定义输出设备每一组彩色原件的最小个数。
- max-color-index 定义在输出设备的彩色查询表中的最大条目数。
- min-color-index 定义在输出设备的彩色查询表中的最小条目数。
宽度高度相关:
- device-height 定义输出设备的屏幕可见高度。
- device-width 定义输出设备的屏幕可见宽度。
- max-device-height 定义输出设备的屏幕可见的最大高度。
- max-device-width 定义输出设备的屏幕最大可见宽度。
- min-device-width 定义输出设备的屏幕最小可见宽度。
- min-device-height 定义输出设备的屏幕的最小可见高度。
- height 定义输出设备中的页面可见区域高度。
- width 定义输出设备中的页面可见区域宽度。
- max-height 定义输出设备中的页面最大可见区域高度。
- max-width 定义输出设备中的页面最大可见区域宽度。
- min-height 定义输出设备中的页面最小可见区域高度。
- min-width 定义输出设备中的页面最小可见区域宽度。
宽高比:包括页面宽高比和设备宽高比
- aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
- device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
- min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
- min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
- max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
- max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
分辨率
resolution 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
max-resolution 定义设备的最大分辨率。
min-resolution 定义设备的最小分辨率。
杂项
max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
scan 定义电视类设备的扫描工序。
grid 用来查询输出设备是否使用栅格或点阵。
二、viewport
什么是viewport
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户需要通过平移和缩放来看网页的不同部分。
设置viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width:控制 viewport 的大小,可以指定的一个值,如 600,或者预定义的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
- height:和 width 相对应,指定高度。
- initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
- maximum-scale:允许用户缩放到的最大比例。
- minimum-scale:允许用户缩放到的最小比例。
- user-scalable:用户是否可以手动缩放。
参考资料
http://www.runoob.com/css/css-rwd-viewport.html
http://www.runoob.com/cssref/css3-pr-mediaquery.html
转载于:https://www.cnblogs.com/weiyinfu/p/10192585.html
手机端网页开发的两个重要设置相关推荐
- 手机端网页设计尺寸,手机端网页设计图片尺寸
电脑网页的设计尺寸 对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络): 安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px 在Window XP常 ...
- ps制作手机端网页字体大小_制作网页的最佳字体大小
ps制作手机端网页字体大小 To make web content work, text on a page must be readable for all visitors. Following ...
- 怎么实现手机端网页页面自适应调整
今天分享下"怎么实现手机端网页页面自适应调整"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
- 手机端网页中图片之间出现白线的解决方法
手机端网页中图片之间出现白线的解决方法 参考文章: (1)手机端网页中图片之间出现白线的解决方法 (2)https://www.cnblogs.com/syzdidi/p/9686463.html 备 ...
- 手机端网页设计尺寸大小
手机端网页设计尺寸大小 对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络): 安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px 在Window X ...
- 携程手机端网页设计效果图
携程手机端网页设计效果图 为了避免挂科,该做的还是得做,自己学得也不咋会,就瞎写的,反正只要效果图出来就完事.所以代码极其啰嗦哈哈哈哈. 效果图如下: 文件总的放置路径是这样的 : 这个是 html ...
- 手机端H5开发,屏幕不同尺寸适配方法(屏幕自适应)
最近在接触手机端H5开发,然后设计师将设计图发给我们进行开发,对于第一次接触详细设计图开发的我来说,觉得很新颖毕竟一直没有接触这么正规的设计图(字体样式,颜色,大小等等),之后再开发的时候,就遇到了一 ...
- 手机端网页处理手机返回键
// 手机端网页: 处理手机返回键 window.onpopstate = function (event) {// 监听到已经按下返回键,获取URL var url = "" + ...
- 解决手机端网页缩放问题
解决手机端网页缩放问题 这个申明是移动设备用的,1:1显示设备屏幕大小,禁止缩放 加到网页文件< head > 标签中 <meta name="viewport" ...
最新文章
- 【leetcode】1013. Pairs of Songs With Total Durations Divisible by 60
- 【内容摘录自 MDN】变量作用域
- Java JDK代理、CGLIB、AspectJ代理分析比较
- 2017-2018-2 20179216 《网络攻防与实践》 SQL注入攻击
- 浪潮云发布全新“1231”业务战略,打造“一朵分布式云”
- stl字符串去除空格_在列表中推送字符并在C ++ STL中将它们打印为空格
- 新开源!实时语义分割算法Light-Weight RefineNet
- bzoj2595 [Wc2008]游览计划
- 自己写的一个简单JAVA网络通讯录
- Ajax Loading进度条gif在线生成网站Preloaders.net
- 双电阻差分电流采样_运放-输入偏置电流与输入失调电流
- 计算机排查方法,电脑开不了机问题排查方法图解(硬件排查)
- 日积一步3(求解点到平面二次曲线的最近距离)
- Elang安装与环境配置
- 北京社保医院选择办法-附A类医保定点医院名单
- 【运放学习】:虚短、虚短、虚地、深度负反馈
- 批处理(.bat)文件
- 经常说的 CPU 上下文切换是什么意思?(下)
- 娱乐万岁,躺平无罪!聊点有技术含量的
- 字节跳动内部资料泄露?音视频开发教程(附面试题+视频教程),全文共301页,包含50个知识点
热门文章
- 集合交集,并集,差集运算
- Tomcat性能监控LambdaProbe
- ASP.NET通过Global.asax和Timer定时器定时运行后台代码
- Python链接Sql server
- Neutron/ML2学习
- oracle发生重启动的介绍
- [C# 3.0 入门] [第一章 Lambda表达式] 第三节:Lambda与匿名方法的区别(日文翻译)...
- 【Java从0到架构师】SpringMVC - 基础
- 【PyQt5 知识点示例代码】布局、菜单、信号与槽、对话框、组件
- 【C++】C++11 新特性(auto,decltype,nullptr,快速遍历,【Lambda表达式详解】)