手机端页面的做法

学会 media query

媒体查询通过@media，判断设备类型，如pc/mobile/pad等设配，然后根据媒体查询的结果使用不同的css。一套html + 多套css
pc端一套html+css/手机端一套html+css
不做响应式布局，pc端和手机端分别使用一个域名，做两个不同的网站例如淘宝和京东。

淘宝pc端网址：www.taobao.com

淘宝手机端网址：m.taobao.com

手机端要加一个 meta

<!-- 快捷方法  meta:vp -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

这个name="viewport"的meta标签是干嘛用的？

iPhone3GS进入中国的时候，发现中国的网页大部分宽度都是980px左右的，而iphone3GS手机宽度只有320px。

那320像素的手机怎么展示980像素的网页呢？

苹果就想了一个办法，那就把所有的网站都缩放，模拟出980像素的效果。

但是后面我们开发的页面都会去适配手机宽度，此时就不需要缩放网页了，这里就需要加入上述的meta标签

width=device-width 告诉我们宽度=设备宽度
user-scalable=no 告诉我们用户缩放=不缩放

不加上述meta标签下面代码结果为980，加了meta标签后，下面代码输出设备宽度

document.documentElement.clientWidth //980or设备宽度
复制代码

手机端的交互方式不一样

没有 hover
有 touch 事件
没有 resize
没有滚动条

移动端页面（响应式）相关推荐

CSS5:移动端页面(响应式)
CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做只有一些新闻站 ...
移动端web页面响应式布局（文字、图片、表格）
移动端web页面响应式布局絮絮叨叨: 最近被领导抓去写了个前端页面,还要是适应移动端的..还三天要完成..前端小白的我硬生生刚出来了,这两天正好闲了点,总结总结. 设置meta 写过前端的小伙伴们 ...
PC端移动端兼容响应式布局页面的制作
之前已经制作了PC端固定布局和移动端流体布局的页面,这次的任务就是将一个页面制作成PC端移动端兼容响应式布局页面,是页面能在不同屏幕大小下呈现处不同最佳显示状态. 主要的过程就是对: 1.将width ...
单页面响应式模板：黑石
预览: 部分页面展示: 演示及下载: 演示地址免费下载更多模板请立刻访问模板集市介绍: 单页面响应式模板,支持ipad,iphone 浏览器兼容:现代浏览器(支持HTML5/CS ...
html5响应式高端企业disuz模板,高端html5响应式企业disuz模板(商业版)
站长介绍易秀购主题网分享一款,可以来丰富很多的功能,非常的方便.这款详细介绍 1.模板版本支持:discuzx3.0版本,discuzx3.1版本,discuzx3.2版本,包括[门户首页].[门户 ...
织梦高端大气响应式会员中心模板自适应手机端
介绍: 织梦dedecms高端大气响应式会员中心模板自适应手机端 UTF8+GBK 新开发的高端简单大气织梦会员中心,响应式自适应手机端,后台充值功能,可以对接宝等其他的第三方网盘下载地址: ht ...
新手怎么做一个免费的单页面响应式网站？
单页面网站近年来受到很多企业青睐,一个干干净净的单页面,不仅能直观地传达企业信息,在展示上也给了企业更多的可能性.部分企业做单页面网站是为了做营销活动,不仅能为主站引流,更能让单页网站的转化更为直观, ...
超棒的HTML5/CSS3单页面响应式模板（支持Bootstrap）
在线演示使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
Html-移动端与响应式
Html-移动端与响应式一. viewport视窗的设置此声明只适用于移动端可以固定移动端的宽长 viewport视窗的设置 content=" width=device-width, ...
宽屏html5网络科技有限公司官网单页面响应式模板
宽屏html5网络科技有限公司官网单页面响应式模板文章目录项目介绍主要用途包含模块页面浏览获取方式项目介绍本项目主要由html5,css样式,原生js构成的宽屏单页面响应式模板.整体结构 ...

移动端页面（响应式）

手机端页面的做法

学会 media query

手机端要加一个 meta

手机端的交互方式不一样

移动端页面（响应式）相关推荐

最新文章

热门文章