web移动端pc端自适应

1. 网站的PC和WAP以及自适应网站这三者有什么区别呢

1、含义不同：PC网站是指电脑（台式电脑和笔记本电脑）访问的网站，WAP网站是无线通讯协议的英文简称，手机WAP网站，自适应网站是使用不同设备浏览时呈现不同的网页，网页内容及版式风格或相似或完全不同。

2、开发基本不同：PC网站是按电脑硬件终端展示进行程序开发的。网站内容相对更加的详细。手机WAP网站是支持手机浏览器访问的网站，是根据手机展示设计开发的。

自适应网站目的在于为了符合访客的浏览。针对一些优化人员，更习惯于做到数据库同步，使PC端的网址和内容与移动端的网址和内容一一对应。

3、访问方式不同：在二维码这一功能没有出现的时候，WAP网站和PC网站的访问方式遵循的都是搜索引擎定律，主要方式也是通过输入网址和搜索关键词进行访问。

由于WAP网站的便捷性，而且为了迎合用户少操作的原则，WAP网站除了通过输入网址和搜索关键词进行访问。由于WAP网站的便捷性，而且为了迎合用户少操作的原则，WAP网站除了通过输入网址和搜索关键词进行访问之外，又多了一个使用微信二维码直接访问的功能。

(1)web移动端pc端自适应扩展阅读：

wap网络营销应用还主要集中在互联网企业上面，是各类网站开拓新功能、新阵地，寻找新业务的重要领域。

但对于传统企业而言，对于wap网站的认识还很有限，wap网站的普及和推广尚需时日。然而wap网站的广大用户市场是客观存在的事实。有市场就必须占领，如何做好传统企业在wap领域的营销活动，还是一个很新的课题。

与传统互联网一样，企业要开展wap网络营销，也需要建设自己的wap网站。虽然在表现形式上，wap网站要弱于一般的网站，对于图片、动画等表现力度不够，但麻雀虽小，五脏俱全。

2. pc端和移动端屏幕自适应

         做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。
1、最小尺寸分辨率1024 768（传统17寸显示器），则可以采用940px、960px、或者常用的980px作为最小宽度。
2、1024 768之后稍大的分辨率就是1280*768了，则可以采用1200px或者1220px作为稍大的网页宽度。
3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签。
4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了。
5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。
6、宽度自适应为不同宽度显示器写布局元素时常用的css。

3. 在移动端 web怎么做到自适应布局

css3用box-flex;在w3school里找找，主要是根据父元素按比例分配高度父元素{width:100%;display:box;}比如三栏布局A、B、C要想设成一样的宽度就用A{box-flex:1;}B{box-flex:1;}C{box-flex:1;}要是两栏布局B是A的2倍那就是A{box-flex:1;}B{box-flex:2;}高度也是还有一个css3的新功能就是calc()计算，可以计算高度，可以试着用一下PS，我只是说说，移动端响应式局的话，布局要随着窗口变的，就像你这个，要是在普通的手机端就得变成一栏布局，不能保持三栏用MediaQuery设置不同的窗口宽度给不同的css样式都是css代码不用js控制

4. Web前端pc和移动端的区别

pc，我们需要考虑五大浏览器，ie6-11，firefox，chrome，safari都得兼容的吧。css还是js，以及各种框架。
mobile的网页开发，我们需要考虑什么呢？
就目前来说，我们只需要考虑webkit内核的浏览器和chrome，uc，qq，小米手机浏览器就好了
1、PC端在开发过程中考虑的是浏览器兼容性，移动端开发中考虑的是手机兼容性问题，做移动端开发，更多考虑的是手机分辨率的自适应和不同手机操作系统的略微差异化；

2、在部分事件的处理上，移动端自然是偏向于触屏的，另外包括移动端弹出的手机键盘该如何处理，这样的问题在PC上肯定不会遇到，但在移动端，如果你没有经验，处理起来是相当麻烦的；
3、布局上，移动端开发是要做到页面布局自适应的，而PC端页面布局的比例会相对固定；
4、在动画效果处理上，PC端要考虑IE的兼容性，通常用JS做动画的通用性会好一些，但相比CSS3却牺牲了较大的性能，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单，效率又高。
在实际中肯定还有其他一些不常见的问题

5. 网站PC端和移动端无法自适应，求教大神，用的织梦后台

你写的样式没有被应用，你的网站要想兼容PC和移动，上传图片的时候一定要注意图片的高度和宽度，织梦上传图片会填写高度和宽度，这个是写到html中的，这里样式优先级高于你的CSS，上传图片的时候要去掉高度和宽度不填，CSS才能控制图片

6. 移动端Web页面适配方案（整理版）

@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]

移动端web页面的开发，由于手机 屏幕尺寸 、 分辨率 不同，或者需要考虑 横竖屏 问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

早期网页设计采用 静态布局 ，通过 <meta> 标签中的 applicable-device 应用设备标识识别移动设备，即 <meta name = 'applicable-device' content = 'mobile'> ，在 <meta> 标签中的 viewport 标签中设置 width ，通过 js 动态修改标签的 initial-scale 使得页面等比缩放，刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用 px 为单位，这种方案实现简单，不存在兼容性问题，但用户体验很不友好。

后面出现 流式布局 ，使用百分比 % 定义宽度，高度使用 px 固定，根据可视区域大小实时进行尺寸调整，通常使用 max-width/min-width 控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题，出现了 弹性布局 。这种布局方案下，包裹文字的元素的尺寸采用 em/rem 为单位，页面主要划分区域的尺寸依据情况使用 px 、百分数或者 em/rem 。如一些高校的网站 jlu ，页面的主要划分区域使用 px 和百分比，包裹文字的元素和文字采用 em 。

上面的这几种方案下，页面元素的大小按照屏幕分辨率进行适配调整，但是整体布局不变，对于 响应式web设计 ，网页布局会随着访问它的视口及设备的不同呈现不同的样式，在实现上可能会以上多种方案的结合，同时搭配 媒体查询 技术使用，使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果，如 mashable 。

[TOC]

像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的 px 元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。比如同样是 14px 大小的字，在 1366×768 显示屏下会显示的小，在 1024×768 显示屏下会相对大。也称为 物理像素（设备像素 ），是分辨率的尺寸单位。

印刷行业常用单位，能够使用测量设备测得的长度，等于 1/72 英寸。

在不同屏幕上， css 像素呈现的物理尺寸一致，但 css 像素对应的物理像素具数不同。标准的显示密度下， 1 个 css 像素对应一个物理像素，缩放时， 1 个 css 像素对应的物理像素会减增。是一种 设备独立像素(device independent pixels: DIPs)

像素密度，每英寸所拥有的像素数。值越高，显示画面细节越丰富。计算公式为： ，其中 和 是分辨率的宽高， 是屏幕尺寸。

打印设备每英寸印刷出来的点有多少个，值越高，图片越细腻。

设备物理像素和设备独立像素比 ，即 是指在理想布局宽度，使用多少个物理像素来渲染一个css像素。js中通过 window.devicePixelRatio 获取，css中通过 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 进行媒体查询。

<meta> 标签中定义了一些元数据信息，通过设置 <meta name = "viewport"> ，提供有关 视口初始大小 的信息，供 移动设备 使用。属性值为

移动端涉及 布局视口 （Layout Viewport）、 视觉视口 （Visual ViewPort）和 理想视口 （Ideal ViewPort）。

与移动端web页面适配有关的手机屏幕特性包括

硬件所支持的，屏幕每行的像素 * 每列的像素点数，单位是 px 。

设备独立的，软件可以达到的，个人理解是使得软件/页面在不同屏幕上显示出来的效果一致。

像素分辨率 ÷ 逻辑分辨率等于 倍率 ，如 @3x 表示分辨率的 3 倍。一个已知物理像素大小的元素，如果在普通屏中其设备像素等于 css 像素，但在一些高清屏中，如 Retina 显示屏，一个css像素对应 2 或 3 个设备像素，这时显示出来的元素会变小。为了让元素如期待显示，需要传入 原始设计稿尺寸 × 倍率 的设计稿，根据 DPR 的定义，这样加载后能够达到同样的效果。

手机屏幕对角线长度换算成英寸的大小

贴上 源码 分析

视口 是浏览器中用于呈现网页的区域，移动端的视口通常指的是 布局视口

使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括 文本 ， 布局高宽 ， 间距 等，使得这些元素能够随视口大小自适应调整。以 1080px 设计稿为基准，转化的计算表示为

响应式设计 使得一个网站同时适配 多种设备 和 多个屏幕 ，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器能力而变化），使其视觉合理，交互方式符合习惯。如使得内容区块可伸缩与自由排布，边距适应页面尺寸，图片适应比例变化，能够自动隐藏/部分显示内容，能自动折叠导航和菜单。

7. 如何使网页同时兼容PC端和移动端

PC和移动因为屏幕像素大小不一样，造成网页在pc和移动端显示有差距。如果要让网页在pc和移动端都有好的用户体验，你需要1、自适应网页：通过对不同分辨率设置不同的样式效果，可以让网页兼容pc和移动端，此方式不适合大型的平台。一般的企业站和个人站可以使用这样的方式。2、分别建立pc端和移动端。两个网站分别对应pc和移动端。

8. 写web端跟写自适应的pc端手机端有什么不一样呢。

手机的屏幕比较小。
当页面在手机上显示的时候，布局可能会和PC 的效果不同。
比如说：
两栏自适应布局中。pc端可能是两栏，但在小屏手机中，可能就是一栏了。