学习内容

移动端概述

移动端布局步骤

媒体查询

移动端概述

移动端:方便移动的设备 mobilePhone watch kindle ipad通过设备模拟器开启移动端开发设备尺寸
iphone5 320*568
iphone678 375*667
iphone678plus 414*736设计稿尺寸
iphone5 640*1136
iphone678 750*1334
iphone678plus 1242*2208设备像素比 dpr
2/3css像素=设计稿像素(物理像素)/像素比

移动端布局步骤

布局视口: 网页的宽度视觉视口: 用户正在看到的网站的区域理想视口: 对设备来讲最理想的视口尺寸 (当布局视口等于视觉视口的时候)width=device-width 宽度=设备宽度
initial-scale=1.0 初始缩放比例为1.0
maximum-scale=1.0 最大缩放比例
minimum-scale=1.0 最小缩放比例
user-scalable=no 不允许用户缩放1.确定设计稿尺寸
2.确定像素比
3.引入理想视口
4.引入icon图标
5.编写移动端布局a.html结构headersectionfooterb.css重置样式

媒体查询

大于1024的时候，背景颜色为红色
768到1024的时候，背景颜色为绿色
450到768的时候，背景颜色为黄色
小于450的时候，背景颜色为蓝色
横屏时候，背景颜色为黑色
竖屏时候，背景颜色为紫色1024 24%
768 33%
450 49%
小于450 98%480 是iphone和安卓手机横屏
768 是ipad或者某些平板电脑横屏/*竖屏*/
@media screen and (orientation: portrait) and (max-width: 720px) {对应样式}
/*横屏*/
@media screen and (orientation: landscape) {对应样式}

【Day16】移动端布局相关推荐

html手机端适配怎么调试,html5面试常见问题及答案：移动端布局与适配篇
原标题:html5面试常见问题及答案:移动端布局与适配篇 1. 移动布局自适应不同屏幕的几种方式 (1)响应式布局 (2)100%布局(弹性布局) (3)等比缩放布局(rem) 2. iscroll安 ...
01移动端布局基础之流式布局
技术交流QQ群:1027579432,欢迎你的加入! 1.移动端基础浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器等. 移动端常见 ...
精通移动端布局 - 概念篇 -
本文大多数的内容基本都是从多篇博客或相关文章中进行筛选,提炼出来,原本我也想用我匮乏的语言来描述,但是发现别人已经总结的更好了,所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录: 基本概念 ...
如何利用vw+rem进行移动端布局
前言因为在公司,只有一个前端,在做移动端布局的时候.利用px进行布局,发现,需要进行各种手机的适配. 所以在开发第二版的时候,想着引用lib-flexible库(即手淘的方案),询问了上一家公司的同 ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
移动端布局的5种方式
刚换公司,设计稿还没出,也没有安排新任务,所以抽空整理一下移动端布局方式. 移动端布局方式整理: 1.固定meta视图 <meta name="viewport" conte ...
css fix 手机端,移动端布局fixed问题解决方案
今天测试忽然提了一个bug,关于position:fixed的问题,一般情况下使用并没问题,当页面出现表单时,由于弹出键盘,整个页面会出现布局错位问题,或者含有fixed的模块会空白(ios11比较明 ...
[html] 移动端布局的自适应如何做？
[html] 移动端布局的自适应如何做? 移动端的布局,如果是采用框架的话,小程序和uni-app等都有响应式单位rpx来做自适应. 如果单纯的用Vue或React的话,一般来说就是flex配合rem ...
关于移动端布局和pc端写法
一:移动端准备工作 <meta name="viewport" content="width=device-width, initial-scale=1.0, ma ...

【Day16】移动端布局

学习内容

移动端概述

移动端布局步骤

媒体查询

【Day16】移动端布局相关推荐

最新文章

热门文章