移动端布局

wapeyang 发布于2019-08-01 17:34 / 347人阅读

摘要：媒体查询使用能在不同的条件下使用不同的样式，是页面最终在不同的终端设备达到不同的渲染效果媒体类型媒体特性你的样式使用的例子同时注意的是既不支持也不支持媒体查询

viewport

浏览器上用来显示网页的那部分区域了
1、设置

view 有
init-scale 页面的初始缩放值为数字
width viewport的宽度
height viewport的高度
mininum-scale 允许用户缩放最小值
maxinum-scale 允许用户缩放最大值
user-scalable 是否允许用户进行缩放

REM布局

使用rem方案可以做到适配不同屏幕分辨率的原理：

设计稿的像素/html(font-size)=css中的代替px 由于html(font-size)这一部分是根据屏幕的宽度（媒体查询可以得到屏幕的宽度）在css内容来动态改变的。

媒体查询

使用css 能在不同的条件下使用不同的样式，是页面最终在不同的终端设备达到不同的渲染效果
@media 媒体类型 and (媒体特性) {你的样式}
使用的例子：

@media screen and(max-width: 480px) {
    html{
        font-size:200px;
    }
}

同时注意的是 IE8 既不支持html5也不支持媒体查询

云服务器 GPU云服务器移动端布局 web移动端布局移动端海外移动端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51230.html

移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
我对移动端适配的了解

摘要：随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。方案一固定高度，使其宽度自适应这也是我接触移动端适配第一次使用的方案。不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂...

import. 2019-08-30 14:16 评论0 收藏0
我对移动端适配的了解

摘要：随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。方案一固定高度，使其宽度自适应这也是我接触移动端适配第一次使用的方案。不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂...

snowLu 2019-08-22 15:45 评论0 收藏0
我对移动端适配的了解

摘要：随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。方案一固定高度，使其宽度自适应这也是我接触移动端适配第一次使用的方案。不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂...

XGBCCC 2019-08-02 10:03 评论0 收藏0
移动端自适应布局方案

摘要：背景现在工作中有超过一半的时间用于移动端项目的开发，包括嵌入页，微信页面和移动页。经过研究，我在公司的多个移动端项目使用了布局来解决移动端自适应布局的问题。简单的说它就是一个相对单位，布局是一个流行的解决移动端响应式布局的方案。背景现在工作中有超过一半的时间用于移动端项目的开发，包括app嵌入页，微信页面和移动wap页。开发移动端页面跟开发PC页面的一个大区别就是移动端对响应式布...

zacklee 2019-08-26 11:50 评论0 收藏0