一、移动端页面布局方案

移动端页面方案 :

单独制作的移动端页面 : 主流开发方案 , PC 端与移动端访问的是不同的页面 , 目前的京东 / 淘宝等电商网站移动端页面采取的该方案 ;
响应式页面兼容移动端 : 开发难度较大 , PC 端与移动端访问的是相同的页面 ;

1、单独制作的移动端页面

通过设备类型判断要加载的网页类型 , 一般会在域名前添加 m 打开移动端 , 如京东域名为 jd.com , 使用 m.jd.com 可以访问其移动端页面 ;

如京东商场 , 在浏览器中输入 https://www.jd.com/ 域名 , 进入的是 PC 端的网页 ,

在浏览器中 , 按 F12 进入调试模式 , 选择手机设备调试 , 输入 https://www.jd.com/ 域名 , 会自动跳转到 https://m.jd.com/ 手机端页面中 , 京东后台会认为是移动设备请求页面 , 自动跳转到移动端页面 ;

2、响应式页面兼容移动端

响应式页面兼容移动端的原理是通过判断当前的屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ;

如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局 ;

网页不断响应当前设备宽度的变化而进行自适应布局修改 ;

三星页面 https://www.samsung.com/cn/ 在 PC 端的样式 :

手机端访问的是同一个页面 ,

响应式页面制作困难 , 调试页面兼容性很难 ;

【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )相关推荐

网页布局响应式页面
十二月二十九 1.网页布局定义网站结构的模式 2.网页布局分为几个部分头部区域菜单导航内容底部 overflow:hidden溢出隐藏 disolay:flex弹性布局 justify-co ...
手机端自适应响应式框架，移动端响应式布局代码
开拓眼界的方式有两种,一是读书,二是花钱.读书,花最少的钱买别人的财富,你把孙子兵法背下来,孙子便跟你一辈子.花钱,行万里路,阅人无数,毕竟对于人生来说,任何经验都是有用的. 那,既然没有钱,就好好读 ...
移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录一.移动端自适应布局 1.rem 什么是rem ...
移动端开发-响应式页面
声明现在开发中,响应式页面使用地会比较少.今天对我们来说,最大的收获是: 学会如何去使用前端 UI 框架. 媒体查询 Bootstrap 框架,学会怎么去用,而不是怎么去做东西,因为后面有更好的框架 ...
响应式设计和移动端优化：如何实现页面在不同设备上的适配和优化
章节一:介绍响应式设计和移动端优化响应式设计是一种使网页能够自适应不同设备和屏幕尺寸的设计方法.它通过使用流式网格布局.媒体查询和弹性图片等技术,使得网页能够在不同分辨率和设备上呈现出最佳的布局和用 ...
python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)...
昨日内容回顾 ajax //get post 两种方式做请求get 主要是获取数据 post 提交数据同一个路由地址既可以是get请求也可以是post请求一个路由对应一个函数get请求acce ...
网页设计（一）——HTML基础概念
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
各种风格404错误页面html模板源码30多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应。
各种风格404错误页面html模板源码30多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 下载链接各种风格404错误页面html模板源码3 ...
二倍图（物理像素物理像素比，多倍图，背景缩放），移动端开发选择（移动端主流方案【单独制作移动端页面（主流），响应式页面兼容移动端（其次）】，移动端技术解决方案【移动端浏览器，特殊样式】）
二倍图物理像素&物理像素比物理像素指的是屏幕显示的最小颗粒,是物理真实存在的,我们开发的1px不一定等于1个物理像素,(PC端相同,移动端不一定相同) PC端和早期手机屏幕是 1CSS像素 ...

【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )

文章目录

一、移动端页面布局方案

1、单独制作的移动端页面

2、响应式页面兼容移动端

【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )相关推荐

最新文章

热门文章