关于移动适配的问题 推荐热议 悬赏3元 已结束
<p>我们的网站pc 是/news 然后移动端是pc的二级目录/m/news 想问一下这个要不要做一下移动的适配呢？因为最近很长一段时间，手机端的文章都不收录了，因为以前都是先收录移动端的文章，在收录pc的，是不是要适配呢？如果做适配的话，会不会对我们的网站造成影响？另外我们还有一个m. 的二级域名，但是这个域名暂时没有用，如果以后要用到的话，是不是可以在pc的二级目录里面做301跳转呢？</p><p><br></p>
前来学习，虚心受教
我的是自适应了
直接弄个自适应或者响应式，这样比较方便，不仅是权重啥的好搞，也好维护
现在的开发语言不都是HTML自适应的嘛？
同问 响应式会不会对SEO好一点
弄个自适应也可以
响应式布局据说是中小型网站比较理想的选择
复杂了
这个太复杂了吧，进来学习一下
1.使用媒体查询功能
1.使用 @media
@media(conditions){
//要执行的css
}
或者
@media(conditions1)and(conditions2){
//csscode
}
1
2
3
4
5
6
7
例如：
@media(max-width:500px){
body{
background:red;
}
}
或者
@(min-width:300px)and(max-width:800px){
body{background:red;}
}
1
2
3
4
5
6
7
8
9
当页面宽度小于等于500px设备。页面背景变红。
当设备宽度在（300，800）之间时，页面变红。
2.使用link媒体查询，引入外部的样式表
<link rel="stylesheet" href="" media="(max-width:320px)">
1
当设备宽度小于320px 时引入的样式表（已经下载了）才会生效
(“active”);
2.添加meta标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=, maximum-scale=, minimum-scale=">
1
历史原因，网页在小屏幕设备上显示时，会被缩小。比如原来1000px的页面要在340px的设备上显示完全，页面就会被缩小的很小，为了解决这个bug，可以再页面顶部加上上面的一行。
苹果利用设备宽度模拟的页面宽度为980px的页面。
viewport：视口
content=”width=device-width”：网页宽度等于设备宽度
user-scalable=no：用户不能缩放
initial-scale=：初始缩放比例为1
3.创建两套htnl和css.后端进行检测设备，根据不同的设备使用不同的html。
手机端的交互方式不一样
没有 hover
有 touch 事件
没有 resize
没有滚动条
手机端专用方案
基本概念
em:一个m的（一个汉字的宽度），相对于父元素字体大小
rem:（html）根元素的font-size,相对于html字体大小
vh \vw
1.使用rem动态设置页面大小。
思路：上面我们知道了单位rem就是html的font-size的大小；所以我可以利用JavaScript获得设备宽度后将html的font-size设为該值即可，代码如下：
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=, maximum-scale=, minimum-scale=">
<script>
var pageWidth =
("<style>html{font-size:"+pageWidth+"px;}</style>");
</script>
</head>
1
2
3
4
5
6
7
然后就可以以rem为单位动态的设置页面的宽度和高度了。他会根据不同设备自适应。
！！！！注意，
- 因为font-size会传给后代元素，所以别要忘了设置body{font-size：16px;}来覆盖掉html的font-size；
- meta标签也要加，负责页面会缩放
2.使用sass工具
1.在 SCSS 里使用 PX2REM
npm config set registry
touch ~/.bashrc
echo 'export SASS_BINARY_Site=""' >> ~/.bashrc
source ~/.bashrc
npm i -g node-sass
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/
start scss/
node-sass -wr scss -o css
1
2
3
4
5
6
7
8
9
10
11
编辑 scss 文件就会自动得到 css 文件
在 scss 文件里添加
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size:
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
即可实现 px 自动变 rem
————————————————
版权声明：本文为CSDN博主「wang_liuyong」的原创文章，遵循CC BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：
我之前回答过一个“电脑PC端收录了移动网站链接怎么解决” 你可以百度搜下
百度资源平台是不支持目录做适配的，别尝试了，
就当做正常的优化就行了，注意移动 端的排版，尽量适应移动和pc都有可读性
ps：不是那种平台大站，一般的企业网站，实际很好解决，做响应式或者自适应，移动pc链接一样就没那么多问题了
直接搞自适应，简单
弄个自适应也可以
弄个自适应的不香吗
不太懂啊
